文章目录
01. 关于router-view
- 单页面多路由区域操作
- 在同一个页面里,我们需要展示多个视图区域,即多个
<router-view>
区域 - 此时,我们需要通过对视图进行命名来达到效果,即命名视图
- 在同一个页面里,我们需要展示多个视图区域,即多个
(1)组件配置
-
在组件里,对
<router-view>
配置name
属性,用于匹配对应的路由没有
name
属性的<router-view>
将会有一个默认的name
属性——default
<template> <div id="app"> <router-link to="/home">Home</router-link> <router-link to="/about">About</router-link> <router-view name="left"></router-view> <router-view></router-view> <router-view name="right"></router-view> </div> </template>
(2)路由配置
-
路由配置内,需要将原来的
component
字段,改为components
字段,因为需要配置多个组件- 并在其中根据组件配置中的
name
属性对路由进行配置
export default new Router({ routes: [ { path: '/home', name: 'Home', components: { // default字段的组件将显示在未设置 [name] 属性的 router-view 内 default: HomeDefault, // left字段的组件将显示在 [name=left] 的 router-view 内 left: HomeLeft, // 同上... right: HomeRight } }, { path: '/about', name: 'About', components: { default: AboutDefault, left: AboutLeft, right: AboutRight } } ] })
- 并在其中根据组件配置中的
02. 关于router-link
(1)配置项
-
<router-link>
的基本配置与$router.push()
的配置一致<router-link to="home">Home</router-link> <router-link :to="{ path: 'home' }">Home</router-link> <router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link> <router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>
-
<router-link>
还可以进行一些额外的配置-
设置
replace
属性的话- 当点击时,相当于调用
router.replace()
,不会留下 history 记录
<router-link :to="{ path: '/abc'}" replace></router-link>
- 当点击时,相当于调用
-
设置
append
属性后-
则在当前(相对)路径前添加基路径
例如,我们从
/a
导航到一个相对路径b
,如果没有配置append
,则路径为/b
,如果配了,则为/a/b
<router-link :to="{ path: 'relative/path'}" append></router-link>
-
-
设置
tag
属性- 可以更改渲染标签
<router-link>
默认渲染为a
标签,设置了tag
属性后,则可以更改这个默认标签
<router-link to="/foo" tag="li"></router-link> <!-- 渲染结果 --> <li></li>
-
设置
exact
属性- 设置标签是否激活
<!-- 这个链接只会在地址为 / 的时候被激活 --> <router-link to="/" exact>
-
(2)注册事件无效解决方法
-
在
@click
后面加上native
,使其变为原生事件,即可正常注册事件<router-link @click.native="change">RouterLink</router-link>
03. Router
配置拓展
(1)基本配置项
routes
:路由对象配置mode
:设置路由模式base
:设置基准路径
(2)scrollBehavior
-
用于控制,在页面跳转后页面的滚动行为
- 只适用于支持
history.pushState
的浏览器
const router = new Router({ routes, scrollBehavior (to, from, savedPostion) { // do something return {...} }})
参数:
-
to
:表示将要前往的路由对象 -
from
:表示正要离开的路由对象 -
savedPosition
: 这个参数只有在使用浏览器的前进/后退按钮时才可用
返回值:
-
这个方法返回将要滚动到的位置的对象信息
return { x: 0, y: 0 } // 表示滚动到 (0,0)位置,即页面顶部return { selector: to.hash } // 表示滚动到锚点(如果有)// 异步滚动return new Promise(()=>{ // 返回一个 Promise对象来得出预期的位置})// 平滑滚动return { behavior: 'smooth' // 添加 behavior 选项到返回的对象中}
- 只适用于支持
(3)fallback
- 当浏览器不支持
history.pushState
时,可以控制路由是否应该回退到 hash 模式- 默认值为 true
- 如果设置为false,则跳转后会刷新整个页面,相当于多页应用
(4)class配置
-
linkExactActiveClass
- 默认值【router-link-active】,全局配置
<router-link>
默认的激活类名
- 默认值【router-link-active】,全局配置
-
linkActiveClass
- 默认值【router-link-exact-active】,全局配置
<router-link>
默认的精确激活的类
return new Router({ // 点击class名字 linkActiveClass: 'active-link', // 匹配到其中一个子集 linkExactActiveClass: 'exact-active-link',// 完全匹配})
- 默认值【router-link-exact-active】,全局配置
(5)query参数加密
-
parseQuery
- 该方法用于解析地址栏参数,可以接收一个字符串参数
- 在
new Router
中传入这个属性,则在解析query参数的时候,会执行这个方法,不会执行默认的方法 - 这个方法只会解析
path
中携带的参数,和刷新浏览器时地址栏的参数 - 不会解析
query
对象中的参数
- 在
- 该方法用于解析地址栏参数,可以接收一个字符串参数
-
stringifyQuery
- 该方法用于序列化传入的query参数,可以接收一个对象参数
- 在
new Router
中传入这个属性,则在序列化query参数的时候,会执行这个方法,不会执行默认的方法 - 序列化之后的参数将显示在地址栏,取代默认的参数
- 在
const router = new VueRouter({ routes, mode: 'history', base: '/app/', parseQuery: parseQuery, stringifyQuery: stringifyQuery})// 解析, 接收一个字符串参数const parseQuery = query => { // do something}// 加密, 接收一个对象参数const stringifyQuery = obj => { // do something}
- 该方法用于序列化传入的query参数,可以接收一个对象参数