vue-router
router文件夹/index.js;
引入vue;
import Vue from 'vue'
import VueRouter form 'vue-router' //引入vue-router
Vue.use(VueRouter);// 把vue-router作为一个插件使用
// 配置映射关系
mode:'history'; //模式为history 默认为hash;
routes:[
{ //路由 / 路由对象
path:
component
}
]
例如:
const router = new VueRouter({
mode:'history',
routes:[
{
path:'/',
component:Home
}
]
})
//最后需要暴露一下
export default router;
最后需要在 main.js 引入 router;
eg:import router from '@/router'
路由标签
<router-link to="/hello">HELO</router-link>
router-link-active
给 router-link-active 添加选中的样式(默认全局设置)
自定义名字 :router 中配置
linkActiveClass: '自定义的名字',
在行间进行单独设置
<router-link to="./xxx" active-class="自定义的名字"></router-link>
设置公共样式 可以在 router-view 上加行间样式,凡是他渲染的根节点都会继承次属性;
配置访问行为的方式(点击、移入等事件)
<router-link to="./xxx" active-class="自定义的名字" event="鼠标事件"></router-link>
重定向
1: {
path:'*',
redirect:'/指定位置'
}
2: {
path:'*',
redirect:{path:'/指定位置'}
}
3: {
path:'*',
redirect:{name:'指定位置'}
}