阅读目录
1、在模块化工程中使用它
(因为是一个插件, 所以可以通过Vue.use()来安装路由功能)
- 第一步:导入路由对象,并且调用 Vue.use(VueRouter)
- 第二步:创建路由实例,并且传入路由映射配置
- 第三步:在Vue实例中挂载创建的路由实例
//配置路由相关的信息
import Vue from 'vue'
import VueRouter from 'vue-router'
//1.通过Vue.vue(插件),安装插件
Vue.use(VueRouter)
//2.创建VueRouter对象,
const routes = [
]
const router = new VueRouter ({
//配置路由和组件之间的关系
routes
})
//3. 将router对象传入到vue实例
export default router
2、使用vue-router的步骤:
第一步: 创建路由组件
第二步: 配置路由映射: 组件和路径映射关系
第三步: 使用路由: 通过和
(1)在components文件夹下创建两个组件文件
Home.vue
<template>
<div id="app">
<h2>我是首页</h2>
<p>我是首页内容,哈哈哈</p>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
</style>
About.vue
<template>
<div id="app">
<h2>我是关于内容</h2>
<p>我是关于内容,哈哈哈</p>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
</style>
(2)配置组件和路径的映射关系
在router/index.js
//配置路由相关的信息
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../components/Home.vue'
import About from '../components/About.vue'
//1.通过Vue.vue(插件),安装插件
Vue.use(VueRouter)
//2.创建VueRouter对象,
const routes = [
{
path:'/home',
component:Home
},
{
path:'/about',
component:About
}
]
const router = new VueRouter ({
//配置路由和组件之间的关系
routes
})
//3. 将router对象传入到vue实例
export default router
(3)使用路由
<template>
<div id="app">
<router-link to="/home">首页</router-link>
<router-link to="/about">关于</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
</style>
(4)运行效果
点击首页
点击关于
3、路由的默认路径
在index.js里添加
{
path:'',
redirect:'/home'
},
4、HTML5的History模式
在index.js添加mode属性
5、router-link补充
- tag: tag可以指定之后渲染成什么组件, 比如下面的代码会被渲染成一个
元素, 而不是
<router-link to="/home" tag="button">首页</router-link>
<router-link to="/about" tag="button">关于</router-link>
- replace: replace不会留下history记录, 所以指定replace的情况下, 后退键返回不能返回到上一个页面中
<router-link to="/home" tag="button" replace>首页</router-link>
<router-link to="/about" tag="button" replace>关于</router-link>
- active-class: 当对应的路由匹配成功时, 会自动给当前元素设置一个router-link-active的class, 设置active-class可以修改默认的名称.
在index.js里添加
在app.vue里的style添加样式
.active{
color:red;
}
重新运行
6、路由代码跳转
修改app.vue文件
<button @click="homeClick">首页</button>
<button @click="aboutClick">内容</button>
添加按钮的方法
methods:{
//通过代码的方式修改路由vue-router
homeClick(){
this.$router.push('/home')
},
aboutClick(){
this.$router.push('/about')
}
}
7、动态路由
(1)创建User.vue文件
<template>
<div id="app">
<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>
<style>
</style>
(2)在index.js修改
{
path:'/user/:userId',
component:User
}
(3)修改app.vue文件
<router-link :to="'/user/'+userId">用户</router-link>
添加
data() {
return {
userId:'lisi'
}
},
(4)运行
8、路由懒加载
路由懒加载做了什么?
- 路由懒加载的主要作用就是将路由对应的组件打包成一个个的js代码块.
- 只有在这个路由被访问到的时候, 才加载对应的组件
修改index.js文件
// import Home from '../components/Home.vue'
// import About from '../components/About.vue'
// import User from '../components/User.vue'
const Home = () =>import('../components/Home')
const About = () =>import('../components/About')
const User = () =>import('../components/User')
重新打包则会看到/dist/static/js/文件夹下有6个js文件(一个组件对应两个js文件)
9、认识嵌套路由
嵌套路由是一个很常见的功能
- 比如在home页面中, 我们希望通过/home/news和/home/message访问一些内容.
- 一个路径映射一个组件, 访问这两个路径也会分别渲染两个组件.
实现嵌套路由有两个步骤:
创建对应的子组件, 并且在路由映射中配置对应的子路由.
在组件内部使用标签.
(1)创建对应的子组件
HomeNews.vue
<template>
<div id="app">
<ul>
<li>新闻1</li>
<li>新闻2</li>
<li>新闻3</li>
<li>新闻4</li>
</ul>
</div>
</template>
<script>
export default {
name: 'HomeNews'
}
</script>
<style>
</style>
HomeMessage.vue
<template>
<div id="app">
<ul>
<li>消息1</li>
<li>消息2</li>
<li>消息3</li>
<li>消息4</li>
</ul>
</div>
</template>
<script>
export default {
name: 'HomeMessage'
}
</script>
<style>
</style>
(2)在组件内部使用标签
在Home.vue文件添加
<router-link to="/home/news">新闻</router-link>
<router-link to="/home/message">消息</router-link>
<router-view></router-view>
(3)运行
需要点击新闻或者消息才会显示列表
(4)默认嵌套路径
在index.js文件添加
打开浏览器默认就是这个界面
10、传递参数
params的类型:
- 配置路由格式: /router/:id
- 传递的方式: 在path后面跟上对应的值
- 传递后形成的路径: /router/123, /router/abc
query的类型: - 配置路由格式: /router, 也就是普通配置
- 传递的方式: 对象中使用query的key作为传递方式
- 传递后形成的路径: /router?id=123, /router?id=abc
传递参数方式一:
(1)创建Profile.vue文件
<template>
<div id="app">
<h2>我是profile组件</h2>
<h2>{{$route.query.name}}</h2>
<h2>{{$route.query.age}}</h2>
<h2>{{$route.query.height}}</h2>
</div>
</template>
<script>
export default {
name: 'Profile'
}
</script>
<style>
</style>
(2)在index.js文件配置profile路由信息
(3)在app.vue文件添加
<router-link :to="{path:'/profile',query:{name:'why',age:18,height:1.88}}">档案</router-link>
(4)效果:
传递参数方式二: JavaScript代码
(1)修改app.vue文件的用户和档案的代码
<button @click="userClick">用户</button>
<button @click="profileClick">档案</button>
在app.vue文件添加按钮的点击方法
userClick(){
this.$router.push('/user/'+this.userId)
},
profileClick(){
this.$router.push({
path:'/profile',
query:{
name:'kobe',age:19,
height:1.88
}
})
}
效果:
点击用户
点档案
11、$ route和$ router是有区别的
$ route和$router是有区别的
- $ router为VueRouter实例,想要导航到不同URL,则使用$router.push方法
- $route为当前router跳转对象里面可以获取name、path、query、params等
修改User.vue文件
添加以下内容
<button @click="btnClick">按钮</button>
methods:{
btnClick(){
console.log(this.$router)
console.log(this.$route)
}
}
运行,点击用户按钮,再点击用户界面的按钮,在浏览器的控制台可以看到它们是不一样的
12、导航守卫使用
我们可以利用beforeEach来完成标题的修改.
- 首先, 我们可以在钩子当中定义一些标题, 可以利用meta来定义
- 其次, 利用导航守卫,修改我们的标题.
导航钩子的三个参数解析:
- to: 即将要进入的目标的路由对象.
- from: 当前导航即将要离开的路由对象.
- next: 调用该方法后, 才能进入下一个钩子
(1)在index.js里的如图位置添加(75-80行代码)
(2)在index.js添加meta属性定义标题
(3)在浏览器可以看到(点击首页标题就是首页,点击用户标题就是用户……)
13、keep-alive遇见vue-router
keep-alive 是 Vue 内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染。
它们有两个非常重要的属性:
- include - 字符串或正则表达,只有匹配的组件会被缓存
- exclude - 字符串或正则表达式,任何匹配的组件都不会被缓存
router-view 也是一个组件,如果直接被包在 keep-alive 里面,所有路径匹配到的视图组件都会被缓存
(1)在app.vue里修改(把 放到里面
<keep-alive>
<router-view/>
</keep-alive>
(2)在home.vue里添加
export default {
name: 'Home',
data() {
return {
path:'/home/news'
}
},
// created() {
// console.log('home created')
// },
// destroyed() {
// console.log('home destroyed')
// },
activated() {
this.$router.push(this.path)
},
//组件的导航守卫
beforeRouteLeave (to,from,next){
console.log(this.$route.path)
this.path = this.$route.path
next()
}
}
(3)测试(在首页里点击消息,在点击关于(其他三个任一个),再点击首页,会发现首页还是会显示消息的列表)
(4)exclude - 字符串或正则表达式,任何匹配的组件都不会被缓存
(如果排除两个组件以上,如Profile,User,中间无空格)
<keep-alive exckude="Profile,User">
<router-view/>
</keep-alive>