笔记

导航名、路径名、组件名 可以一致，也可以不一致。

2022-02-07以后，vue-router的默认版本，为4版本。
vue-router4 只能在 vue3 中使用。
vue-router3 只能在 vue2 中使用。
安装 vue-router3 版本如下:

npm i vue-router@3

vue-router ∈ 插件库

源码

main.js

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'

//引入VueRouter
import VueRouter from 'vue-router'
//引入路由器
//完整写法:
//import router from './router/index.js'
//因为认识,所以省略了 index.js ，所以 简写为:
//一个应用一个路由器就够了,不用整很多个。
import router from './router'



//关闭Vue的生产提示
Vue.config.productionTip = false

//应用插件 VueRouter 
Vue.use(VueRouter)

//创建vm
new Vue({
    el:'#app',
    render: h => h(App),

    //118
    router:router
})

App.vue

<template>
  <div>
    <div class="row">
      <div class="col-xs-offset-2 col-xs-8">
        <div class="page-header"><h2>Vue Router Demo</h2></div>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-2 col-xs-offset-2">
        <div class="list-group">
                    <!-- 原始html中我们使用 a标签 实现页面的跳转 
          <a class="list-group-item active" href="./about.html">About</a>
          <a class="list-group-item" href="./home.html">Home</a>-->

                    <!-- Vue中借助 router-link标签 实现 路由的切换  router-link ... to="/组件名"  
          vue-router 会把 router-link 转为 a标签 
          active-class="active" 意思: 点我的时候,把 active 样式加在 about身上
          -->
                    <router-link class="list-group-item" active-class="active" to="/about">About</router-link>
          <router-link class="list-group-item" active-class="active" to="/home">Home</router-link>


        </div>
      </div>
      <div class="col-xs-6">
        <div class="panel">
          <div class="panel-body">

            <!--此处到底展示什么组件，得看用户点击的是哪个导航项。-->

                        <!-- 118
              指定组件的 呈现位置 -->
            <router-view></router-view>

          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
        name:'App',
    }
</script>

router\index.js

// 该文件专门用于 创建 整个应用 的路由器

import VueRouter from 'vue-router'

//引入组件
import About from '../components/About'
import Home from '../components/Home'

/*
//完整写法:
//创建一个路由器
const router = new VueRouter({
    routes:[
        {
            path:'/about',    //路径
            component:About //组件
        },
        {
            path:'/home',
            component:Home
        }    
    ]
})
export default router
*/
//简写形式:
//创建并暴露一个路由器
export default new VueRouter({
    routes:[
        {
            path:'/about',
            component:About
        },
        {
            path:'/home',
            component:Home
        }
    ]
})

components\home.vue

<template>
    <h2>我是Home的内容</h2>
</template>

<script>
    export default {
        name:'Home'
    }
</script>

components\About.vue

<template>
    <h2>我是About的内容</h2>
</template>

<script>
    export default {
        name:'About'
    }
</script>