vue-router总结 -- 基础使用
结构.png
一、简单介绍
Vue Router是vuejs官方的路由管理器,是学习vue的必备技能,利用vue-router,可以轻松构建单页应用。本文所有内容,均是自我总结,如有错误敬请指正。
二、基本使用
1.开始
(1)安装vue-router包
npm install --save vue-router
(2)定义路由
创建route.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from './Home'
import Hello from './Hello'
Vue.use(Router)
export default new Router({
routes: [
path: '/', // 访问的路径
name: 'Home',
component: Home // 视图对应的组件
path: 'hello',
name: 'Hello',
component: Hello
(3)注册
在main.js中
import Vue from 'vue'
import App from './App.vue'
import router from './router'
new Vue({
router,
render: h => h(App)
}).$mount('#app')
此时,启动项目访问根路径,既能打开Home组件内容。
2.两种使用方式
(1)声明式导航
<router-link to="/hello">打开Hello</router-link>
<router-link>组件默认会在页面生成一个a标签,点击会跳转到to属性对应的地址。也可以写成如下形式:
<router-link :to="path">打开Hello</router-link>
<router-link :to="{path: '/hello'}">打开Hello</router-link>
<router-link :to="{name: 'Hello'}">打开Hello</router-link>
<router-link>所有属性及说明
属性 说明
to(必须) 目标路由地址。
replace 替换当前路由,在历史记录栈中,用当前路由地址替换上一个路由地址。
append 目标路由地址为相对路径时有效,添加该属性,则在当前路径前添加基路径。
tag 默认值:"a",router-link组件渲染在页面上的标签名称。
active-class 默认值:"router-link-activve",链接激活时使用的css类名。
exact 精确匹配router-link是否为激活状态,不添加时,例如:访问'a/b/c'时,'a','a/b'对应的router-link也为激活状态,添加exact属性后,'a','a/b'则不会激活。
exact-active-class 默认值:'router-link-exact-active',router-link处于激活状态时的class类名。
event 默认值:'click',声明触发导航的事件
(2)编程式导航
路由跳转还可以通过router的实例方法实现,常用的方法有
push()
,
replace()
,
go()
,使用如下:
router.push('/hello')
router.push({name: 'Hello'})
router.push({path: '/hello'})
router.replace('/hello')
router.replace({name: 'Hello'})
router.replace({path: '/hello'})
router.go(1) // 前进一步
router.go(-1) // 后退一步
push()
和
replace()
使用方法基本一致,唯一区别在于push()是往历史记录栈后插入一条新的记录,而replace()是替换当前记录,不会改变历史记录栈长度。使用
go()
方法时,如果传入的参数,超出当前历史记录栈范围,则不会发生跳转。
需要注意的是,在使用
router.push({path: '', params: {}})
形式时,参数将无法传递,params会被忽略,具体传参方式,在后面的路由传参部分会详细介绍。
3.嵌套路由
当页面变得相对复杂,出现了多级视图组件嵌套时,会使用到嵌套路由,也就是在<router-view>中包含<router-view>。
router.js
routes: [{
path: '/',
name: 'Home',
component: Home,
children: [{
path: '/about',
name: 'About',
component: About,
path: '/about/a',
name: 'a',
component: a
App.vue
<template>
<div id="app">
<router-view/>
</template>
Home.vue
<template>
<div class="">
<div>home</div>
<router-view></router-view>
</template>
效果:
在router.js中,
/about
地址匹配的是Home的子路由,
/about/a
匹配的是最外层的路由,所以访问
localhost:8080/#/about
会在Home中的<router-view>渲染组件,而访问
localhost:8080/#/about/a
会在App中的<router-view>渲染组件。
4.路由传参
四种传参方式:
(1)直接拼接在访问路径上
router.js
routes: [
path: '/about/:id',
name: 'About',
component: About,
About.vue
<template>
<div class="">参数为:{{$route.params.id}}</div>
</template>
效果:
说明:访问地址为
localhost:8080/#/about/1
,其中/1就是匹配路径上的id,在页面组件中,通过访问
$route.params
可以取到参数id为1。
这种方式,会使组件和路由高度耦合,可以通过设置props属性解耦,使用更为灵活。
router.js
routes: [
path: '/about/:id',
name: 'About',
component: About,
props: true // 设置为true
About.vue
<template>
<div class="">参数id:{{id}}</div>
</template>
<script>
export default {
props: {
id: {
default: ''
</script>
(2) 通过?和&符号拼接在访问路径上
router.js
routes: [
path: '/about',
name: 'About',
component: About,
About.vue
<template>
<div class="">参数为:{{$route.query}}</div>
</template>
效果:
说明:访问地址
localhost:8080/#/about?id=1&name=abc
时,可以在页面组件中通过
$route.query
获取到参数对象。
(3)通过router实例方法传递参数
router.js
routes: [
path: '/about',
name: 'About',
component: About,
About.vue
<template>
<div class="">参数为:{{$route.params}}</div>
</template>
Home.vue
<template>
<div class="">
<div>home</div>
<router-link :to="{name: 'About', params: {a: 1, b: 2}}">跳转到About</router-link>
<div @click="$router.push({name: 'About', params: {c: 3, d: 4}})">点我也可以跳转</div>
</template>
说明:
①这里目标路由地址必须用name属性,如果使用path属性,在页面组件中无法获取到这里的params对象。
②这种方式传参,页面刷新后,无法获取params(,,ԾㅂԾ,,)。
(4)配置路由时,设置meta属性
这种方式,通常用来设置全局展示的内容,比如设置不同页面的title属性。
router.js
routes: [{
path: '/',
name: 'Home',
component: Home,
meta: {
id: '1'
path: '/about',
name: 'About',
component: About,
meta: {
id: '2'
App.vue
<template>
<div id="app">
当前路由id:{{$route.meta.id}}
<router-view></router-view>
</template>
说明:访问
localhost:8080/#/
时,
$route.meta.id
为1,访问
localhost:8080/#/about
时,
$route.meta.id
为2。
5.重定向与别名
(1)重定向
router.j
routes: [
path: '/about',
name: 'About',
component: About,
path: '/other',
redirect: '/about'
说明:此时访问
localhost:8080/#/other
会被重定向到
localhost:8080/#/about
路径。
redirect也可以是一个对象
{
path: '/other',