vue-router
1.安装
cnpm install --save vue-router
2.载入Router
import VueRouter from 'vue-router';
Vue.use(VueRouter);
3.载入组件
const Login = () =>import('@/views/login')
const App = () =>import('@/views/app')
const Dashboard = () =>import('@/views/dashboard')
const Config = () =>import('@/views/config')
const Footer = () =>import('@/views/footer')
采用es6箭头函数实现懒加载,提高单页面性能
4.导出
export default new Router({
routes: [
{path:'/',component:App,children:[
{path:'dashboard',component:Dashboard},
{path:'config',component:Config},
{path:'footer',component:Footer},
]},
{path:'/login',component:Login},
]
})
这里的children内部是二级路由
5.页面部分放置视口接收导出的组件
<router-view></router-view>
注意二级路由要在父页面放置视口进行路由,其余组件视口均可放在主页面(APP.VUE)
6.路由导航
<router-link to="/login"></router-link>
或者
在对应函数中使用
this.router.push('/login.vue')
7.监听路由
watch: {
$route (to, from) {
// to: 路由跳往何处
// from: 从哪里跳过来的
}
}
8.路由守卫
/**
* @param {to} 将要去的路由
* @param {from} 出发的路由
* @param {next} 执行下一步
*/
router.beforeEach((to, from, next) => {
document.title = to.meta.title || '卖座电影';
if (to.meta.needLogin && !$store.state.isLogin) {
next({
path: '/login'
})
} else {
next()
}
})