vue路由vue-router
原创
1 安装
步骤一：安装vue-router
npm install vue-router --save步骤二：在模块化工程中使用它（因为是一个插件，所以可以通过Vue.use()来安装路由功能）
- 导入路由对象，并且调用Vue.use(VueRouter)
- 创建路由实例，并且传入路由映射配置
- 在Vue实例中挂载创建的路由实例
2 使用vue-router的步骤
- 创建路由组件
- 配置路由映射：组件和路径映射的关系
- 使用路由：通过<router-link>和<router-view>
<router-link>：该标签是一个vue-router中已经内置的组件，它会被渲染成一个<a>标签
<router-view>：该标签会根据当前路径，渲染出不同的组件
网页中其他的内容，比如顶部的标题/导航，或者底部的一些版权信息会和<router-view>出于同一个等级
在路由切换时，切换的是<router-view>挂载的组件，其他内容不会发生改变3 history模式
index.js的export中添加
mode: 'history'4 router-link补充
tag属性：渲染为指定元素
<router-link to="/home" tag="button">首页</router-link>replace属性：该属性不会留下history记录，所以指定replace的情况下，后退键返回不能返回到上一个页面中
<router-link to="/home" tag="button" replace>首页</router-link>active-class：当<router-link>对应的路由匹配成功时，会自动给当前元素设置一个router-link-active的class，设置active-class可以修改默认的名称
- 在进行高亮显示的导航菜单挥着底部tabbar时，会使用到该类
- 但是通常不会修改类的属性，会直接使用默认的router-link-active即可
router-link-active属性修改为active
<router-link to="/home" tag="button" replace active-class="active">首页</router-link>5 代码跳转路由
<button @click="homeClick">首页</button>methods: {
homeClick() {
// 通过代码的范式修改路径 vue-router
this.$router.push('/home')
console.log('homeClick');
}
}6 动态路由
{
path: '/user/:userId',
name: 'User',
component: User
}子路由获取参数
<template>
<div>
<h2>我是用户界面</h2>
<p>用户信息</p>
<h2>{{ userId }}</h2>
<h2>{{ $route.params.userId }}</h2>
</div>
</template>
<script>
export default {
name: "User",
computed: {
userId() {
return this.$route.params.userId
}
}
}
</script>7 路由的懒加载
- 当导包构建应用时，javascript包会变得非常大，影响页面加载
- 如果我们能把不同路由的对应组件分割成不同的代码块，然后当路由被访问的时候才能加载对应的组件，这样就更高效了
路由懒加载做了什么
- 主要所用是将路由的对应组件打包成一个个的js代码块
- 只有在这个路由被访问到的时候，才加载对应的组件
index.js
方式一：
const Home = resolve => {
require.ensurre(['../components/Home.vue'],()=>{
resolve(require('../components/Home.vue'))
})
}方式二：AMD写法
const About = resolve => require(['../compontents/About.vue'], resolve);方式三：在ES6中，我们可以有更加简单的写法来组织Vue异步组件和Webpack的代码分割
// 懒加载方法导入(一个懒加载对应一个js文件)
const Home = () => import('../components/Home')8 嵌套路由
Home.vue
<router-link to="/home/news">新闻</router-link>
<router-link to="/home/message">消息</router-link>
<router-view></router-view>index.js
{
path: '/home',
name: 'Home',
component: Home,
children: [
{
path: '',
redirect: '/news'
},
{
path: 'news',
component: HomeNews
},
{
path: 'message',
component: HomeMessage
},
]
},9 传递参数
- params类型：/route/:id
- query：类型 /router?id=123
button和router-link方法二选一
http://localhost:8080/profile?id=1&name=charles
# router-link
<router-link :to="{ path: '/profile',query:{id:'1',name:'charles'}}">个人资料</router-link>
# button
<button @click="userClick">用户</button>
<button @click="profileClick">个人资料</button>
<router-view></router-view>
userClick() {
this.$router.push('/user/' + this.userId)
},
profileClick() {
this.$router.push({
path: '/profile',
query: {
id: 2,
name: 'tom'
}
})
}profile.vue
<h2>{{ $route.query.id }}</h2>
<h2>{{ $route.query.name }}</h2>10 导航守卫
// 前置守卫(guard)
router.beforeEach((to, from, next) => {
document.title = to.matched[0].meta.title
next()
})
// 后置钩子(hook)
router.afterEach((to,from)=>{
})index.js
{
path: '/about',
name: 'About',
meta: {
title: '关于'
},
component: About
},About.vue
<script>
export default {
name: "Home",
created() { // 创建组件
console.log('created');
// document.title = '首页'
document.title = to.matched[0].meta.title
},
// mounted() { // 挂载到dom
// console.log('mounted');
// },
// updated() { // 界面发生刷新
// console.log('updated');
// }
}
</script>11 keep-alive遇见vue-router
- keep-alive是Vue内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染
（1）include：字符串或正则表达式，只有匹配的组件会被缓存
（2）exclude：字符串或正则表达式，任何匹配的组件都不会被缓存
- router-view：也是一个组件，如果直接被包在
keep-alive里面，所有路径匹配到的视图组件都会被缓存
// 这两个函数，只有该组件被保持了装填使用keep-alive时，才是有效的
activated() {
this.$router.push(this.path)
},
beforeRouteLeave(to, from, next) {
this.path = this.$route.path;
next()
}<keep-alive>
<router-view/>
</keep-alive>原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
