基础
路由规划配置，router/index.js
const routes = [
{
path: '/',
name: 'Home',
component: Home,
},
{
path: '/admin',
name: 'admin',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "admin" */ '../views/Admin.vue'),
},
];
AI 代码解读
路由出口导航，App.vue
<div id="app">
<nav>
<router-link to="/">home</router-link>
<router-link to="/admin">admin</router-link>
</nav>
<router-view></router-view>
</div>
AI 代码解读
动态路由
路由配置
// router/index.js
{
path: '/course/:name',
component: () => import(/* webpackChunkName: "course" */ '../views/Detail.vue'),
}
AI 代码解读
路由跳转
<router-link :to="`/course/${c.name}`">
{{ c.name }} - {{ c.price | currency('￥') }}
</router-link>
AI 代码解读
参数读取
<p>{{$route.params.name}}</p>
AI 代码解读
通配符
// router/index.js
{
path: '*',
component: () => import('../views/404.vue'),
}
AI 代码解读
嵌套路由
// router/index.js
{
path: '/admin',
name: 'admin',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "admin" */ '../views/Admin.vue'),
children: [
{
path: '/admin/course/:name',
name: 'course',
component: () => import(/* webpackChunkName: "course" */ '../views/Detail.vue'),
},
],
}
AI 代码解读
使用
<div class="admin">
<img alt="Vue logo" src="../assets/logo.png">
<a href="">test</a>
<course-list :courses="courses"></course-list>
<router-view></router-view>
</div>
AI 代码解读
组件复用注意事项
组件复用时嵌套，局部组件更新时，容器create不动，可以通过监听$route变化实现
export default {
watch: {
$route: {
handler: () => {
console.log('$route change');
},
immediate: true,
}
},
};
AI 代码解读
编程导航
// router.push(location, onComplete?, onAbort?);
// 字符串
router.push('home');
// 对象
router.push({ path: 'home' })
// 命名的路由
router.push({ name: 'user', params: { userId: '123' } })
// 带参数查询 => /register?plan=private
router.push({ path: 'register', query: { plan: 'private' } })
AI 代码解读
路由守卫
全局守卫
// router/index.js // 全局守卫 router.beforeEach((to, from, next) => { // ... // to: Route 即将要进入的目标 路由对象 // from: Route 当前导航正要离开的路由 // next: Function 一定要调用该方法来 resolve 该钩子 });AI 代码解读示例
// 全局守卫 const routes = [ { path: '/admin', name: 'admin', meta: { auth: true, } } ] router.beforeEach((to, from, next) => { if (to.meta.auth) { if (window.isLogin) { next(); } else { next(`/login?redirect=${to.fullPath}`); } } else { next(); } });AI 代码解读路由独享守卫
{ path: '/admin', name: 'admin', // 全局守卫 beforeEnter(to, from, next) => { if (window.isLogin) { next(); } else { next(`/login?redirect=${to.fullPath}`); } } }AI 代码解读组件内守卫
可以在路由组件内直接定义一下路由导航守卫- beforeRouteEnter
- beforeRouteUpdate
- beforeRouteLeave
// Admin.vue beforeRouteEnter(to, from, next) { if (window.isLogin) { next(); } else { next(`/login?redirect=${to.fullPath}`); } }AI 代码解读
数据获取时机
路由导航前
// 组件未渲染，通过next传递回调访问组件实例 beforeRouteEnter(to, from, next) { getPost(to.params.id, post => { next(vm => vm.setData(post)); }); } // 组件已渲染，可以访问this直接赋值 beforeRouteUpdate(to, from, next) { this.post = null; getPost(to.params.id, post => { this.setData(post); next(); }) }AI 代码解读路由导航后
created() { this.fetchData(); }, watch: { '$route': 'fetchData', }AI 代码解读
addRoutes动态路由
// 动态添加路由
this.$router.addRoutes([
{
path: '/admin',
name: 'admin',
// ...
}]);
AI 代码解读
组件缓存
利用keep-alive做组件缓存，保留组件状态，提高执行效率
<keep-alive :include="['admin']" max="10">
<router-view></router-view>
</keep-alive>
AI 代码解读
使用include 或 exclude时使用的是组件的name有两个可利用的钩子：activated、deactivated
路由懒加载
路由组件的懒加载能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应的组件
() => import(/* webpackChunkName: "group-about" */ "../views/About.vue")
AI 代码解读
