vue-router路由
Vue Router 是 Vue.js 官方的路由管理器
自动全局安装:
vue create 项目名称
手动配置:
1、安装
在app项目文件夹里面
npm i vue-router
2、在min.js下引入包
import Vue from 'vue' import App from './App.vue' import VueRouter from 'vue-router';
3、使用use来引用(使用)
Vue.use(VueRouter);
4、需要配置router -> route.js
引入组件,配置路由表
配置路由表(当前是哪个路径需要执行哪个组件)
const routes = [ //配置什么路径就走哪个组件 { path:'/', //根路径 component:app //app就是根 }, { path: '/foo',//路径 component: Foo//组件 }, { path: '/bar', component: Bar } ]; export default new VueRouter({ router:routes //等同于 //router })
在new vue-router时候,通过routes来引配置数
new Vue时候是通过router来引路由
5、放到跟下
new Vue({ el:'#app', render:()=>h, router })
6、渲染,在页面中定义router-view 标签
<router-link></router-link> //有children时候,父组件必须有router-view <router-view></router-view> //路由匹配到的组件将渲染在这里
<router-link>//默认会渲染成一个a标签 <router-link tag="button"> //这样可以加一个按钮的样式
<router-link>
to属性
表示目标路由的链接
通过 to 属性指定目标地址
默认渲染成带有正确链接的 <a> 标签
/*字符串*/ <router-link to="home">home</router-link> /*v-bind 的 JS 表达式 */ 如果是:to,路径要写成字符串 比如<router-link :to="'home'">Home</router-link> :to 可以是字符串也可以是对象 /*命名的路由 params*/ <router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link> /*带查询参数,下面的结果为 /register?plan=private*/ <router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>
:to="{path:'a'}"
:to="{params:{a:5}}"
注意:如果使用params,那么就不能定义path,改为使用name
tag属性
具有tag属性的router-link会被渲染成相应的标签
//比如生成一个按钮 <router-link tag ="button"></router-link>
replace属性
replace在routre-link标签中添加后,页面切换时不会留下历史记录
<router-link :to="/home" replace></router-link>
active-class属性
默认值 "router-link-active"
设置 链接激活时使用的 CSS 类名
<router-link :to="/home" active-class="u-link--Active">Home</router-link>
可以在router.js文件中设置
const router = new VueRouter({ mode: 'hash', linkActiveClass: 'u-link--Active', // 这是链接激活时的class })
exact属性
开启router-link
的严格模式,默认值 false
//这个链接只会在地址为 / 的时候被激活 <router-link :to="/" exact>home</router-link>
exact-active-class属性
默认值 router-link-exact-active
配置当链接被精确匹配的时候应该激活的 class
激活class 应用在外层元素
让激活 class 应用在外层元素,而不是 <a> 标签本身,可以用 <router-link> 渲染外层元素,包裹着内层的原生 <a> 标签
<router-link tag="li" to="/foo"> <a>/foo</a> </router-link>
路由嵌套
路由嵌套就是有多层路由嵌套在一起,也就是子路由
栗子:
APP.vue文件
<template> <div id="app"> <router-link to="/" tag="button">home</router-link> <router-link to="/About" tag="button">about</router-link> <router-view></router-view> </div> </template> <script> </script> <style> .actived{ background:orange; } </style>
About.vue文件
(里面包含sub1、sub2、sub3三个子路由页面)
<template> <div class="about"> <h1>This is an about page</h1> <router-link to="/about/sub1" tag="button">sub1</router-link> <router-link to="/about/sub2" tag="button">sub2</router-link> <router-link to="/about/sub3" tag="button">sub3</router-link> <router-view></router-view> </div> </template> <script> export default { name:'about' } </script>
router.js路由文件
1 import Vue from 'vue'; 2 import VueRouter from 'vue-router'; 3 import Home from '../views/Home.vue' 4 import About from '../views/About.vue' 5 import Sub1 from '../views/sub/sub1.vue' 6 import Sub2 from '../views/sub/sub2.vue' 7 import Sub3 from '../views/sub/sub3.vue' 8 Vue.use(VueRouter); 9 10 const routes = [ 11 { 12 path:'/', 13 component:Home 14 }, 15 { 16 path:'/About', 17 component:About, 18 children:[ 19 { 20 path:'sub1', 21 component:Sub1 22 }, 23 { 24 path:'sub2', 25 component:Sub2 26 }, 27 { 28 path:'sub3', 29 component:Sub3 30 } 31 ] 32 33 } 34 ] 35 36 export default new VueRouter({ 37 linkExactActiveClass:'actived',//精确匹配选中的样式 38 routes 39 });
在路由上挂一个children属性,children为一个数组
子路由路径不用加/
如果有子级路由,那么记得在父级身上加<router-view></router-view>
此时组件就会在父级组件显示
不管嵌套多少层都遵循此规则,多级嵌套的话可以使用一个模板
正常写法中,一层路径(/xxx
)对应一个router-view
比如url: /a/b/c
那/a
对应的就是App.vue中的router-view,/a
进入a.vue
中
那/a/b
对应的就是a.vue中的router-view, /a/b
进入b.vue
中