Vue路由官网:https://router.vuejs.org/zh-cn/路由特点:1.保存历史状态2.刷新保留当前页面位置
路由实现原理:通过ajax,h5 history,js原生哈希算法
Vue路由用法:
<router-link to="路由路径" tag="自定义标签">首页</router-link>
<router-view>首页内容展示视图</router-view>
配置路由表:
先引入
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router);
import组件名from '组件路径'//引入组件
const routes=[
{path:'/',redirect:要跳转的路径},//默认打开路径
{path:'路由路径2',component:触发的组件名2},
{path:'路由路径3',component:触发的组件名3},
........
//二级路由配置
{path:'路由路径4',
component:触发的组件名4,
children:[{path:'',compoent:组件名}]}
]
export default new Router({
routes:routes,
linkActiveClass:"high"//高亮显示
});
网友评论