Ant-design-vue 项目实战笔记 (后继将继续补充)
935 / 0 / 创建于 4年前 /
wsAdmin 的个人博客
Vue路由知识点
安装
1.直接下载 / CDN
https://unpkg.com/vue-router/dist/vue-router.js
你也可以像https://unpkg.com/vue-router@2.0.0/dist/vue-router.js 这样指定 版本号 或者 Tag。
在 Vue 后面加载 vue-router，它会自动安装的：
<script src="/path/to/vue.js"></script>
<script src="/path/to/vue-router.js"></script>
2. NPM
npm install vue-router
如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能：
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
如果使用全局的 script 标签，则无须如此 (手动安装)。定义路由
1.每个路由应该映射一个组件。 其中"component" 可以是通过 Vue.extend() 创建的组件构造器，或者，只是一个组件配置对象。
const routes = new VueRouter({
routes:[
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
})
2.嵌套路由
实际生活中的应用界面，通常由多层嵌套的组件组合而成。同样地，URL 中各段动态路径也按某种结构对应嵌套的各层组件，例如：/user/foo/profile /user/foo/posts
+------------------+ +-----------------+
| User | | User |
| +--------------+ | | +-------------+ |
| | Profile | | +------------> | | Posts | |
| | | | | | | |
| +--------------+ | | +-------------+ |
+------------------+ +-----------------+借助 vue-router，使用嵌套路由配置，就可以很简单地表达这种关系。<div id="app">
<router-view></router-view>
</div>
const User = {
template: '<div>User {{ $route.params.id }}</div>'
}
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User }
]
})这里的 <router-view> 是最顶层的出口，渲染最高级路由匹配到的组件。同样地，一个被渲染组件同样可以包含自己的嵌套 <router-view>。例如，在 User 组件的模板添加一个 <router-view>：const User = {
template: `
<div class="user">
<h2>User {{ $route.params.id }}</h2>
<router-view></router-view>
</div>
`
}要在嵌套的出口中渲染组件，需要在 VueRouter 的参数中使用 children 配置：const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User,
children: [
{
// 当 /user/:id/profile 匹配成功，
// UserProfile 会被渲染在 User 的 <router-view> 中
path: 'profile',
component: UserProfile
},
{
// 当 /user/:id/posts 匹配成功
// UserPosts 会被渲染在 User 的 <router-view> 中
path: 'posts',
component: UserPosts
}
]
}
]
})==注意，以 / 开头的嵌套路径会被当作根路径。这让你充分的使用嵌套组件而无须设置嵌套的路径。==
你会发现，children配置就是像routes配置一样的路由配置数组，所以呢，你可以嵌套多层路由。
此时，基于上面的配置，当你访问/user/foo时，User的出口是不会渲染任何东西，这是因为没有匹配到合适的子路由。如果你想要渲染点什么，可以提供一个 空的 子路由：const router = new VueRouter({
routes: [
{
path: '/user/:id', component: User,
children: [
// 当 /user/:id 匹配成功，
// UserHome 会被渲染在 User 的 <router-view> 中
{ path: '', component: UserHome },
// ...其他子路由
]
}
]
})命名视图
有时候想同时 (同级) 展示多个视图，而不是嵌套展示，例如创建一个布局，有 sidebar (侧导航) 和 main (主内容)两个视图，这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果router-view没有设置名字，那么默认为 default。<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>一个视图使用一个组件渲染，因此对于同个路由，多个视图就需要多个组件。确保正确使用 components 配置 (带上 s)：const router = new VueRouter({
routes: [
{
path: '/',
components: {
default: Foo,
a: Bar,
b: Baz
}
}
]
})路由传参方式
一、
to里的值可以是一个字符串路径，或者一个描述地址的对象。例如：
// 字符串
<router-link to="apple"> to apple</router-link>
// 对象
<router-link :to="{path:'apple'}"> to apple</router-link>
// 命名路由
<router-link :to="{name: 'applename'}"> to apple</router-link>
//直接路由带查询参数query，地址栏变成 /apple?color=red
<router-link :to="{path: 'apple', query: {color: 'red' }}"> to apple</router-link>
// 命名路由带查询参数query，地址栏变成/apple?color=red
<router-link :to="{name: 'applename', query: {color: 'red' }}"> to apple</router-link>
//直接路由带路由参数params，params 不生效，如果提供了 path，params 会被忽略
<router-link :to="{path: 'apple', params: { color: 'red' }}"> to apple</router-link>
// 命名路由带路由参数params，地址栏是/apple/red
<router-link :to="{name: 'applename', params: { color: 'red' }}"> to apple</router-link>二、router.push(...)方法
场景:<button @click="gotoTargetView">点击跳转到目标路由user页面</button>
1.通过调用$router对象的push()方法，向push()方法传递一个路由配置对象，通过params来传递参数
==注意:使用params必须和name属性一起使用，否则要跳转的目标路由页面无法通过params获取到传递过来的参数。==//路由配置
{
path: '/user',
name: 'user',
component: User
}
//方法
gotoTargetView(){
this.$router.push({name:"user", params:{userName:"lhb"}});//注意name不能换成path:"/user"
}
//目标组件user
this.$route.params.userName;//User.vue组件中就可以通过$route的params获取到参数2.通过调用$router对象的push()方法，向push()方法传递一个路由配置对象，需要通过query来传递参数
==注意:使用query的时候，可以通过path属性也可以通过name属性来指定目标路由。这种情况下，query传递的参数会显示在url后面?userName=?&，如:http://localhost:8082/about?userName=lhb==//路由配置
{
path: '/user',
name: 'user',
component: User
}
//方法
gotoTargetView(){
this.$router.push({name:"user",query:{"userName":"lhb"}});
this.$router.push({path:"/user",query:{"userName":"lhb"}});
}
//目标组件user
this.$route.query.userName;//User.vue组件中就可以通过$route的query获取到参数3.通过路由配置，配置动态路由参数:
上面的路由配置都是严格匹配的，只有要访问的路径与路由配置中的path一模一样，才能跳转到相应的组件上.但有时现实却不是这样的，当我们去访问网站并登录成功后，它会显示欢迎你，+你的名字。不同的用户登录，只是显示"你的名字"部分不同，其它部分是一样的。这就表示，它是一个组件，假设是user组件。不同的用户（就是用户的id不同），它都会导航到同一个user组件中。这样我们在配置路由的时候，就不能写死,就是路由中的path属性，不能写死，那要怎么设置?导航到user组件，路径中肯定有user,id不同，那就给路径一个动态部分来匹配不同的id.在vue-router中，动态部分以:开头，那么路径就变成了/user/:id,这条路由就可以这么写：{ path:"/user/:id", component: user }.//路由配置
{
path: '/user/:userName',
name: 'user',
component: User
}
//方法
gotoTargetView() {
this.$router.push({path:`/user/${userName}`});
}
//目标组件user
this.$route.params.userName;//User.vue组件中就可以通过$route的params获取到参数4.在组件中配置请求//配置路由
{
path:"/Menu/edit",
components:{
menu_edit:MenuEdit,
},
meta: { requiresAuth: true }
}
//配置请求
<router-link :to="{path:'/Menu/edit',query:{id:record.id}}">Edit</router-link>
//获取参数
this.$route.query.id,三、注意：
1、关于带参数的路由总结如下：无论是直接路由“path" 还是命名路由“name”，带查询参数query，地址栏会变成“/url?查询参数名：查询参数值“;
直接路由“path" 带路由参数params params 不生效;
命名路由“name" 带路由参数params 地址栏保持是“/url/路由参数值”;2、设置路由map里的path值：带路由参数params时，路由map里的path应该写成: path:'/apple/:color' ;
带查询参数query时，路由map里的path应该写成: path:'/apple' ；3、获取参数方法：在组件中：{{$route.params.color}}
在js里： this.$route.params.color/this.$route.query.colorForm表单
1.form: this.$form.createForm(this) 注册form表单
2.v-decorator="[id, options]" 注册form表单中的标签
id 必填输入控件唯一标志。支持嵌套式的写法
options.initialValue 子节点的初始值，类型、可选值均由子节点决定
options.rules 校验规则
options.valuePropName 子节点的值的属性，如 Switch 的是 'checked'
3.resetFields() 重置表单方法,如果使用initialValue设置了初始值,则重置为初始值
4.validateFields()校验并获取一组输入域的值与Error，若fieldNames参数为空，则校验全部组件moment使用
1.在vue-cli3中已将moment扩展下载并放在node-modules文件中,使用时只需在组件中 import moment from "moment" 就可以
2.引入moment//require 方式
var moment=require('moment');
//import 方式
import moment from 'moment'; 2.设定moment区域为中国//require 方式
require('moment/locale/zh-cn')
moment.locale('zh-cn');
//import 方式
import 'moment/locale/zh-cn'
moment.locale('zh-cn'); 3.格式化时间类型1.取当天时间，以YYYY年MM月DD日形式显示
var now=moment().format("YYYY年MM月DD日");
2.任意时间戳格式化，以YYYY-MM-DD HH:mm:ss形式显示
注意:时间戳需要13位,PHP时间戳一般是10位
var t1=moment(1411641720000).format('YYYY-MM-DD HH:mm:ss');
获取前一天日期，格式以YYYY-MM-DD形式显示
var t11=moment().day(0).format('YYYY-MM-DD');
获取本周五日期，格式以YYYY-MM-DD形式显示
var t12=moment().weekday(5).format('YYYY-MM-DD');
获取上周五日期，格式以YYYY-MM-DD形式显示
var t13=moment().weekday(-3).format('YYYY-MM-DD');4.获取当前年份、月份、日期var t14=moment().year()
var t15=moment().month()//此处月份从0开始，当前月要+1
var t16=moment().date();
注意这个地方，日期不是.day()/days()
结合t14，t15，t16就可以输出你想要的任何和当前日期、月份相关的日期
例如：我想获取去年今天的完整日期，如：今天是2018-7-23，我要输出的是2017-7-23
console.log(`${t14-1}-${t15+1}-${t16}`);
当然这不是获取去年今天日期最好的办法，但你可以拼出很多你想要的组合，下面会介绍更好的获取去年今日的方法。
获取上个月今天的日期，格式以YYYY-MM-DD显示
var t18=moment().subtract(1, 'months').format('YYYY-MM-DD');
获取上个月日期，格式以YYYY-MM显示
var t19=moment().subtract(1, 'months').format('YYYY-MM')
获取前一天日期，格式以YYYY-MM-DD显示
var t20 = moment().subtract(1, 'days').format('YYYY-MM-DD');
获取去年今天的日期，格式以YYYY-MM-DD显示，即简便的获取去年今天日期的方法
var t21= moment().subtract(1, 'year').format('YYYY-MM-DD');
获取两个小时之后的时间
var t22=moment().add(2,'hours').format('YYYY-MM-DD HH:mm:ss');
这个的应用是获取时间戳过期时间
比较也很简单，只要获取当前时间，一样的format用><=号比较就可以了
获取五天前的日期
例如:今天2018-7-23，获取到的时间是2018-7-18
var t23=moment().subtract(5, 'days').format('YYYY-MM-DD');注意
1.在ant-desgin-vue组件中,例如:树形控件组件,参数:defaultSelectedKeys 与 参数 selectedKeys 的区别,以default开头的参数,其值必须是固定的,如若设置成变动的你将看不到效果vue-cookie的使用
1.安装vue-cookie(其实vue-cli3中的node_modules文件夹中已经有vue-cookie,无需再安装)
npm install vue-cookie --save2.在 mian.js 引入和通过 Vue.use() 明确地安装
//在 main.js 中引入
import Vue from 'Vue'
import VueCookie from 'vue-cookie'
// 全局挂载
Vue.use(VueCookie) 3.组件中使用Cookie
// 设置cookie
this.$cookie.set('test', 'Hello world!', 1);
// 获取方式
this.$cookie.get('test');
// 删除 cookie
this.$cookie.delete('test');
注意:$cookie关键名称不能设置为['expires'，'max-age'，'path'，'domain'，'secure']4.vue-router + vue-cookies实现登录超时退出
4.1、在main.js中引入vue-cookie
import VueCookie from "vue-cookie";
Vue.use(VueCookie); 4.2、在登录的时候将用户信息/登录状态存入cookie中
this.$cookie.set('user_token',[用户信息]);4.3、在路由文件中（route.js）注册全局前置守卫
//路由守卫
router.beforeEach((to, from, next) => {
document.title = to.matched[0].meta.title;
//在vue-router中获取用户token
var user_token = router.app.$cookie.get('user_token');
//判断如果不是进入登录页面
if (to.fullPath != '/login'){
//根据获取的用户token信息,判断是否登录
if (user_token) {
//执行下一步
next()
} else {
//未登录则进入下Login登录页
next({
path: '/login'
});
}
}else{
next();
}
});Axios封装
1、首先，在vue-cli项目的src路径下新建一个axios文件夹，在axios文件夹里新建api.js和request.js，api.js用于写接口，对axios的封装写在request.js里，项目机构如图：
2、开始封装Axios,
2.1、安装 axios
$ npm install axios2.2、在request.js文件中
import axios from 'axios';
const service = axios.create({
baseURL: "http://www.vueadmin.io", // api的base_url
timeout: 5000, //请求超时时间
headers: {},
withCredentials: false, // `withCredentials` 表示跨域请求时是否需要使用凭证,默认 false
responseType: 'json', // `responseType` 表示服务器响应的数据类型，可以是 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream',默认 json
});
// 请求拦截器
service.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 响应拦截器
service.interceptors.response.use(function (response) {
// 对响应数据做点什么
return response
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
export default service;3、Axios接口的调用方式
3.1、在api.js文件中(我们把接口统一写在api.js文件里。当然，如果你的业务非常复杂的话，建议把不同业务的api分开放到不同的文件里，这样方便以后维护)
// 加载request.js文件
import service from './request';
//登录接口
export const Login = data => {
return service({
url: "/index.php/admin/Login/login",
method: 'post',
data
})
};
//获取菜单
export const GetMenu = data => {
return service({
url: "/index.php/admin/Menu/getMenu",
method: 'get',
params: data,
})
};
//注意,get与post请求时的传参方式不一样4、在组件中使用
<template>
<a-form id="components-form-demo-normal-login" :form="form" class="login-form" @submit="handleSubmit">
<h2 id="title">{{systemName}}</h2>
<a-form-item>
<a-input v-decorator="['username',{ rules: [{ required: true, message: 'Please input your username!' }] }]" placeholder="Username">
<a-icon slot="prefix" type="user" style="color: rgba(0,0,0,.25)"/>
</a-input>
</a-form-item>
<a-form-item>
<a-input v-decorator="['password',{ rules: [{ required: true, message: 'Please input your Password!' }] }]" type="password" placeholder="Password">
<a-icon slot="prefix" type="lock" style="color: rgba(0,0,0,.25)"/>
</a-input>
</a-form-item>
<a-form-item>
<a-checkbox v-decorator="['remember',{valuePropName: 'checked',initialValue: true,}]">
Remember me
</a-checkbox>
<a class="login-form-forgot" href="">
Forgot password
</a>
<a-button type="primary" html-type="submit" class="login-form-button">
Log in
</a-button>
Or <router-link to="/register">
register now!
</router-link>
</a-form-item>
</a-form>
</template>
<script>
import {Login} from '../../axios/api';
export default {
name: "Login",
created() {
const params = {
username:values.username,
password:values.password,
remember:values.remember
};
//使用登录接口
Login(params).then((response)=>{
if (response.data.code === 1){
//在这里处理返回数据
}
});
},
};
</script>
<style scoped>
</style>本作品采用《CC 协议》，转载必须注明作者和本文链接
关于 LearnKu
粤公网安备 44030502004330号
推荐文章：