1、tag="li"把<outer-link转变为li标签，active-class="active"bootstrap的样式
<ul class="nav nav-pills">
<router-link to="/" tag="li" active-class="active" exact><a>Home</a></router-link>
<router-link to="/user" tag="li" active-class="active"><a>User</a></router-link>
</ul>
2、路由传递参数：:id to="/user/10" 中的10就是作为ID传递给下个页面，用this.$route.params.id接收
{path: '/user/:id',component: User}
<router-link to="/user/10" tag="li" active-class="active"><a>User</a></router-link>
data() {
return {
id: this.$route.params.id
}
},
3、路由一旦切换就会刷新，不切换时要监听路由参数变化 to代表路由
watch: {
'$route': function(to){
this.id = to.params.id;
}
},
4、路由传递参数
<router-link tag="button" :to="{name: 'userEdit',params:{id:'45'},query:{id:100,name:'zhangsan'}}" class="btn btn-primary">Edit User</router-link>
点击效果等同于：http://localhost:8080/user/45/edit?id=100&name=zhangsan
5、重定向：
在浏览器输入http://localhost:8080/redirect-me，自动只想name=home的页面
{path: '/redirect-me',redirect: {name: 'home'}}
在浏览器输入http://localhost:8080/redirect-me，自动只想path=/user的页面
{path: '/redirect-me',redirect: { '/user'}}
当输入的连接上面都无法匹配时，设置通配符*，指向默认页面
{path: '*',redirect: '/'}
6、路由命名
<router-link to="/" tag="li" active-class="active" exact><a>Home</a></router-link>
<router-link to="/user" tag="li" active-class="active"><a>User</a></router-link>
<router-view name="headerTop"></router-view>
<router-view></router-view>
<router-view name="headerBottom"></router-view>
{path: '',name: 'home',components:{
default: Home,
headerTop: Header
}},
{path: '/user',component: User,components:{
default: User,
headerBottom: Header
}},
7、判断路由是否能访问3种方法
1）：main.js中设置beforeEach，该设置为全局设置，访问任何路由都要判断
router.beforeEach((to,from,next)=>{
console.log("every router before");
next();
});
2）：routes.js设置beforeEnter，该设置只对UserDetail有效
{path: ':id', component: UserDetail,beforeEnter:(to,from,next)=>{
console.log("UserDetail routes router before");
next();
}},
3）：在vue文件中设置beforeRouteEnter，该设置只对UserDetail本文件有效
export default {
beforeRouteEnter(to,from,next) {
console.log("UserDetail UserDetail.vue router before");
next();
}
}
后台输出顺序为：
every router before
UserDetail routes router before
UserDetail UserDetail.vue router before
7、判断路由是否能离开：
export default {
data() {
return {
confirm: false
}
},
beforeRouteLeave(to,from,next){
if(this.confirm){
next();
}else {
if(confirm("是否确认离开？")){
next();
}else{
next(false);
}
}
}
}
8、路由懒加载：在router.js设置。最后的user为组名，即其中一个加载的时候，所有组名为user的路由同时加载，不加组名，只加载自己
const User = resolve => {
require.ensure(['./components/user/User.vue'], () => {
resolve(require('./components/user/User.vue'));
}, 'user');
};
const UserStart = resolve => {
require.ensure(['./components/user/UserStart.vue'], () => {
resolve(require('./components/user/UserStart.vue'));
}, 'user');
};
const UserEdit = resolve => {
require.ensure(['./components/user/UserEdit.vue'], () => {
resolve(require('./components/user/UserEdit.vue'));
}, 'user');
};
const UserDetail = resolve => {
require.ensure(['./components/user/UserDetail.vue'], () => {
resolve(require('./components/user/UserDetail.vue'));
}, 'user');
};
Processed:
0.013, SQL:
9
