router 导入
import Vue from 'vue' import Router from 'vue-router' import order from '@/view/New/order.vue' import Son1 from '@/view/New/son1.vue' import Son2 from '@/view/New/son2.vue' import Son3 from '@/view/New/son3.vue' Vue.use(Router) export default new Router({ linkActiveClass: 'u-link--Active', // 这是链接激活时的class routes: [ { path: '/', redirect: '/4' }, { path: '/4', name: 'order',redirect: '/4/son1', component: order, children: [ { path: '/4/son1', name: "son1", component: Son1 }, { path: '/4/son2', name: "son2", component: Son2 }, { path: '/4/son3', name: "son3", component: Son3 } ]} ] })
order.vue
<template> <div class="detail"> <div class="box"> <p>父组件</p> <router-link to="/4/son1" active-class="u-link--Active">首页</router-link> <router-link to="/4/son2" active-class="u-link--Active">电影</router-link> <router-link to="/4/son3" active-class="u-link--Active">关于</router-link> </div> <!-- 这是一个占位符,将来,通过路由规则,匹配到的组件,会被替换到 router-view 所在的位置 --> <router-view></router-view> </div> </template> <style lang="less" scoped> .detail { margin: 5px; padding: 10px; border: 2px dashed salmon; height: 400px; background-color: #f6f6f6; .box { margin: 5px; padding: 10px; border: 2px dashed blue; p { color: salmon; } .u-link--Active { color: aqua; } } } </style>
son.vue:
<template> <div> <h1>这是son1.vue 首页 子组件</h1> </div> </template> <style lang="less" scoped> div { margin: 5px; padding: 10px; border: 2px dashed red; h1 { font-size: 26px; font-weight: 700; color: orange; } } </style>
son2:
<template> <div> <h1>这是son2.vue 电影 子组件</h1> </div> </template> <style lang="less" scoped> div { margin: 5px; padding: 10px; border: 2px dashed blue; h1 { font-size: 26px; font-weight: 700; color: red; } } </style>
son3:
<template> <div> <h1>这是son3.vue 关于子组件</h1> </div> </template> <style lang="less" scoped> div { margin: 5px; padding: 10px; border: 2px dashed green; h1 { font-size: 26px; font-weight: 700; color: palevioletred; } } </style>
-
用户点击 页面的 路由链接
router-link
,点击的一瞬间,就会修改浏览器地址栏中的Hash地址; -
当 hash 地址被修改以后,会立即被
vue-router
监听到,然后进行 路由规则的 匹配;最终,找到 要显示的组件; -
当 路由规则匹配成功以后,就找到了要显示的组件,然后把这个组件,替换到页面指定的路由容器
router-view
中
设置路由高亮的两种方式和重定向
-
通过路由默认提供的
router-link-active
, 为这个类添加自己的高亮样式即可; -
通过路由构造函数,在传递路由配置对象的时候,提供
linkActiveClass