安装方式(vue)
1、npm安装
npm install vue-router
** main.js **
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
2、CDN引入
在index.html中引入,vue-router文件。这样可以减小打包的文件体积,且无需安装。
** index.html **
<script src="<%= BASE_URL %>cdn/vue-router/3.0.1/vue-router.min.js" charset="utf-8"></script>
在vue.config.js中配置一下,打包时忽略vue-router(已经全局引用)
//忽略的打包文件
config.externals({
'vue-router': 'VueRouter',
});
路由跳转方式
1、使用 <router-link></router-link>,
一般被称为声明式导航
要结合router-view标签使用,否则无法渲染。router-link标签会被渲染成一个a标签。
** App.vue **
<template>
<div id="app">
<router-view /> // a标签被渲染在这里
</div>
</template>
** index.vue **
<router-link to="/home"></router-link> // to后面添加另外组件的路由地址
2、使用this.$router.push()
跳转, 一般被称为编程式导航
** 通过this.$router访问路由器,通过this.$router.push()向浏览器的历史中添加一条记录来进行跳转。
其方式和history.pushstate()一致 **
该方法的参数可以是一个字符串路径,或者一个描述地址的对象。例如:
this.$router.push('home') // 字符串
this.$router.push({path:'home'}) //对象
this.$router.push({name:'user'}, params:{userId:123}) //命名路由 /user/123
this.$router.push({ path: 'register', query: { page: 1 }}) //带查询参数 /register?page=1
** 当this.$router.push()方法中带有path的时候,parasm就会被忽略 **
const userId = '123'
// 下述两种方法的效果一致
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
// 这里的 params 不生效
router.push({ path: '/user', params: { userId }}) // -> /user
重定向和别名
1、重定向redirect
例如本来要跳转到a界面,但是没有跳转到a界面,而跳转到了b界面。(重定向到了b)
const router = new VueRouter({
routes: [
{ path: '/a', redirect: '/b' }
]
})
**
tip:
redirect可以是一个路径,也可以是个对象,甚至是一个方法
redirect: {name:'b'}
redirect: to => {
reutrun '/b'
}
**
**需要注意的是:导航守卫并不会作用于a路由上, 而是作用于重定向的路由, 即 b路由**
2、别名alias
例如/a的别名是/b,但我们访问/b的时候,虽然url显示的是/b, 但是实际我们匹配到是/a的内容,就像是访问/a一样
const router = new VueRouter({
routes: [
{ path: '/a', component: A, alias: '/b' }
]
})