局部刷新--改变路径 不全部刷新
点击 页面回刷新:多页面内容
安装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>