安装路由
- npm install vue-router --save-dev
配置
- 在src里新建router/index.js
- 在src下面新建main.js 和 App.vue
- 在router/index.js 配置路由路径和对应的组件
/**
* 配置vue-router
*/
import Vue from 'vue';
import VueRouter from 'vue-router';
// 使用插件, 用use
Vue.use(VueRouter); // 调用一个这个方法
// 路由的数组
const routes = [
{
// 访问路径
path: '/film',
component: () => import('@/views/film'),
},
{
// 访问路径
path: '/cinema',
component: () => import('@/views/cinema'),
},
{
// 访问路径
path: '/pintuan',
component: () => import('@/views/pintuan'),
},
{
// 访问路径
path: '/my',
component: () => import('@/views/my'),
},
];
const router = new VueRouter({
routes
});
export default router;
- 在main.js导入router/index.js, 放入vue的实例中
import Vue from 'vue';
import App from './App.vue';
import router from './router/index'
new Vue({
router,
render: h=>h(App)
}).$mount('#app');
- 运行项目 vue serve ./src/main.js
router-view 和 router-link
- /根路由
- /film 意思是 根路由/film路由
- router-view放置(渲染)子路由
meta可以设置属性,方便路由守卫使用
{
path: '/order',
component: () => import('@/views/my/order'),
redirect: '/order/orderList',
children: [
{
path: 'orderList',
meta: {
title: '订单列表',
needLogin: true
},
component: () => import('@/views/order/orderList')
},
{
path: 'orderDetail/:orderID',
meta: {
title: '订单列表',
needLogin: true
},
component: () => import('@/views/order/orderDetail')
}
]
}
/**
* @param {to} 将要去的路由
* @param {from} 出发的路由
* @param {next} 执行下一步
*/
router.beforeEach((to, from, next) => {
document.title = to.meta.title || '卖座电影'
// 是否已登录
let isLogin = $store.state.isLogin
if (to.meta.needLogin && !isLogin) {
next({
path: '/login'
})
} else {
next();
}
})
在需要守卫的位置设置
meta: {
needLogin: true
},
