Vue Router —— 基础

安装方式（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' }
  ]
})