Vue学习：路由（实现单页面应用SPA）

局部刷新--改变路径 不全部刷新

点击 页面回刷新：多页面内容

安装vue-router：指定版本 自己的脚手架支持上什么版本要查资料

npm i vue-router@3

引入插件+使用插件

//引入VueRouter
import VueRouter from 'vue-router'

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

使用需要你创建router，

创建并暴露

// 该文件专门用于创建整个应用的路由器
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
        }
    ]
})

对于实例上，产生了router

//引入路由器
import router from './router'

原始html中我们使用a标签实现页面的跳转 --》 Vue中借助router-link标签实现路由的切换

<a class="list-group-item active" href="./about.html">About</a>
 <a class="list-group-item" href="./home.html">Home</a>

替换：a --》router-link

href==》to

转成了a标签

<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>

active-class="active" 激活的样式实现高亮效果

指定组件的呈现位置router-view

 <router-view></router-view>