Vue的路由

整体结构如下

1 下载router的包（这里vue2和vue3 对于router的依赖是有影响的，请下载对应的router包）

npm i vue-router@3

2 在main.js中引用 VueRouter    一个引入包  一个引入路由规则

import Vue from 'vue'
import App from './App.vue'
//引入包
import VueRouter from 'vue-router'
//这是配置的路由规则
import router from './router'


//使用路由
Vue.use(VueRouter)

new Vue({
    //讲App组件放入容器
    render: h => h(App),
    router:router
  }).$mount('#app')

3 配置路由规则       这个地方关键字是routes，踩过坑大家注意

//文件专门用来创建应用的路由器
import VueRouter from 'vue-router'
import about from '../components/About'
import home from '../components/Home'


//创建路由器
export default new VueRouter({
     routes:[
         {
             path:'/about',
             component:about
         },
         {
            path:'/home',
            component:home
         }
     ]
})

4 书写组件   这就很简单了······

<template>
  <div><h2>abouty</h2></div>
</template>

<script>
export default {
    name:'about'

}
</script>

<style>

</style>

5 最简单的引用，修改app.js 

  5.1 导航栏

    

  <!-- 导航栏列表 -->
<div class="list-group">
<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>

 5.2 路由对应组件显示的位置

<div class="panel-body">
  <!-- 指定组件的呈现位置 -->
 <router-view></router-view>
</div>