安装依赖包
npm install vue-router
使用vue-router
import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router); // 安装路由功能
const router = new Router({ // 创建路由实例
routes: [
{
path: '/', // 首页
component: () => import('@/view/Home.vue')
},
{
path: '/login', // 登录页
component: () => import('@/view/Login.vue')
},
// 子路由与动态路由
{
path: 'about', // 关于我的栏目
meta: {
isLogin: true
},
component: () => import('@/view/about/Index.vue'),
// 子路由
children: [
{
path: 'info', // 个人信息页
component: () => import('@/view/list/components/Info.vue')
},
// 动态路由,动态参数获取 this.$route.params.data
{
path: 'feedback/:mobile', // 反馈页
component: () => import('@/view/list/components/Feedback.vue')
},
]
}
]
});
// 导航守卫,用于处理跳转(前/后)需要进行的操作。这里采取beforeEach()演示。
router.beforeEach((to, from, next) => {
// to表示要进入的路由,from表示要离开的路由,next有很多意思,next()表示放行,next(false)表示不响应也就是你进不去路由的页面,next(path)表示跳转到path页。
// 模拟登录,假如首页不需要登录,关于我的页面以及它下面所有的页面都需要登录
const token = false;
if(!token && to.meta.isLogin) next('/login');
next();
});
new Vue({
router, // 挂载到vue实例上。
render: h => h(App),
}).$mount("#app")
这样会导致mian.js代码比较混乱,可以将代码提取出去再在mian.js文件中引入。
路由的这些知识官方文档讲的很清楚,可以直接转至 vue-router 学习