可以在创建项目中直接选择安装路由
也可以使用npm包后续安装路由 npm install vue-router —save

步骤二

第一步: 导入路由对象 ，并且调用 Vue.use (VueRouter)
第二部:创建路由实例 ， 并且传入路由映射配置
第三步: 在Vue实例中挂载创建的路由实例

  1. // 配置理由相关的信息
  2. import VueRouter from 'vue-router'
  3. import Vue from 'vue'
  5. //1.通过Vue.use（插件） ，安装插件’
  6. Vue.use(VueRouter)
  8. //2.创建VueRouter对象
  9. const routes = [
  11. ]
  12. const router = new VueRouter({
  13.     //配置路由和组件之间的映射关系
  14.    routes
  15. })
  17. //3.将router对象传入到router实例中
  18. export default router

使用vue-router 的步骤

~ 1.第一步 创建路由组件
~ 2. 第二步: 配置路由映射：组件和路径映射关系
3.第三步:使用路由 ：通过和

router-link的属性

  1. tag:tag可以指定<router-link>之后渲染成什么组件,比如上面的代码会被渲染成一个<li>元素
  2. <router-link to="/home" tag="li"  这个属性在vue3版本中已经废弃  具体可看官网文档
  3. replace : replace 不会留下

路由代码跳转

有时候。页面跳转可能需要执行对应的Javascript代码,这个时候，就可以使用第二种跳转方式了

  1.     <div id="app">
  2.   <button @click="homeClick"> 首页</button>
  3.   <button @click="aboutClick">关于</button>
  4.     <router-view></router-view>
  5.   </div>
  6. </template>
  8. <script>
  9. export default {
  10.   name: 'App',
  11.   methods:{
  12.     // 通过代码方式修改路由 vue-router
  13.   homeClick () {
  14.         this.$router.push("/home")
  15.   },
  16.   aboutClick () {
  17.     this.$router.push("/about")
  18.       }
  19.     }
  20. }
  21. </script>