//跳转
this.$router.push('/movie/火影');//生成新的历史记录
this.$router.replace('/movie/火影')//不生成新的历史记录
<template>
<div>
APP根组件
<hr>
<!-- <a href="#/left">左组件</a>
<a href="#/right">右组件</a>
<a href="#/movie">电影组件</a> -->
<router-link to="/left">左组件</router-link>
<router-link to="/right"> 右组件</router-link>
<router-link to="/movie/火影">火影</router-link>
<router-link to="/movie/2">海贼王</router-link>
<router-link to="/movie/3">七龙珠</router-link>
<router-link to="/login">登录页</router-link>
<router-link to="/main">主页</router-link>
<hr>
<router-view></router-view>
</div>
</template>
import VueRouter from 'vue-router'
//把VueRouter，安装为vue项目的插件
Vue.use(VueRouter)
//创建实例
const router = new VueRouter({
routes:[
{path:'/',redirect:'/left'},
{path:'/left',component:Left,},
{path:'/login',component:Login,},
{path:'/main',component:Main,},
{
path:'/right',
component:Right,
redirect:'/right/tab1',
children:[
// {path:'/',redirect:'tab1'},
{path:'tab1',component:Tab1},
{path:'tab2',component:Tab2},
]
},
{path:'/movie/:mid',component:Movie,props:true}
]
})
router.beforeEach(function(to,form,next){
if(to.path==='/main'){
const token = localStorage.getItem('token')
if(token){
next();
}else{
next('/login');
}
}else{
next();
//next('/login');
// next(false);
}
})
//向外共享
export default router
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
