安装

npm i vue-router@3

使用路由，引入路由规则

main.js文件

import Vue from 'vue'
import App from './app.vue'
// 导入vue-router
import VueRouter from 'vue-router'
// 引入路由规则
import router from './router/index'
// 使用路由插件
Vue.use(VueRouter)

new Vue({
  el:'#app',
  render: h => h(App),
  // vue使用路由规则
  router:router
})

配置路由规则,在文件夹router新建文件index.js
这个文件是统一管理组件的路由文件
router/index.js

// 导入路由插件
import VueRouter from "vue-router"

// 导入组件
import About from '../components/About'
import Home from '../components/Home'
// 实例化VueRouter
export default new VueRouter({
 // 配置路由规则，route是VueRouter构造函数的配置。和vue的data一样的内置配置
 routes:[
  {
   // 配置浏览器的路径名字，比如
   // http://localhost:8080/#/about
   path:'/about',
   // 跳转到哪个路径就显示哪个组件，
//URL是http://localhost:8080/#/about，就显示About这个组件，
//这个组件是import导入import About from '../components/About'
   component:About
  },
  {
   path:'/home',
   component:Home
  }
 ]
})

path和component就是像是一组key和value的关系，以后我们指定一个规则（path的值就是规则），就显示对应的组件（component的值就是指定的组件）

app.vue文件配置

<template>
  <div>
   <!-- 这是普通的组件，在js里面有在component配置中引入组件 -->
   <Banner></Banner>
   <!-- router-link相当于a标签，to相当于href，但是to这个属性必须写，不然报错如下： -->
   <!-- [Vue warn]: Missing required prop: "to" -->
   <!-- 这个router-link属性标签，在html解析中最终会变成a标签，所以，css样式会生效 -->
   <router-link to="/about">about</router-link>
   <br>
   <router-link to="/home">home</router-link>
   <!-- router-view这个标签在使用路由组件时要写上，表示要在哪里显示组件标签，
   现在可以看出来，先展示了Banner组件，然后展示router-link里面的内容，
   当点击about或home这两个相当于a标签包裹的标签体时，router-view要展示的组件
  要显示的组件由to里面的值做决定，to里面的值由会跳转到/router/index.js文件去寻找path的值
  path就把对应的component配置的组件展示 -->
   <router-view></router-view>
  </div>
</template>

<script>
import Banner from './components/Banner.vue'
export default {
  components: { Banner },

}
</script>

<style>
a{
 list-style: none;
 text-decoration: none;
 color: red;
}
</style>

使用router-link 这个标签时，它会自动去router/index.js文件查找里一些配置，使用router-link 的to属性时，to的值 ，会在VueRouter这个构造函数配置的routes找path的值进行对比
现在我们这么配置to="/about"，值是/about，我们找path的值也是/about，两个对比成功，那么就显示组件component:About

About.vue文件

<template>
  <h1>这是about</h1>
</template>

<script>
export default {
 // 这个可写可不写
 name:'test1'

}
</script>

Home.vue

<template>
  <h1>这是home</h1>
</template>

<script>
export default {

}
</script>

vue-router简单展示.PNG

---

vue-router几个注意点
1.把路由组件和普通组件分开，用不同的文件夹保存，普通组件要引入组件标签

components: { Banner }

路由组件不需要,to到router/index.js文件找path，再显示同一个括号里面的配置的的组件

component:About

2.每次切换路由标签，都会重新挂载，被切换后，路由组件会被销毁

路由组件调用和销毁.PNG

mounted(){
 console.log('Home.vue组件被调用')
},
beforeDestroy(){
 console.log('Home.vue组件被销毁')
}
...
mounted(){
 console.log('About.vue组件被调用')
},
beforeDestroy(){
 console.log('About.vue组件被销毁')
}

3.每个路由组件都有一个router

• $route这路由组件自己的本身的配置

• $router这是所有路由组件共用的配置

  
  route和router.PNG