HTML5的History模式
我们前面说过改变路径的方式有两种:
URL的hash
HTML5的history
默认情况下, 路径的改变使用的URL的hash.
如果希望使用HTML5的history模式, 非常简单, 进行如下配置即可:
router-link补充
在前面的<router-link>中, 我们只是使用了一个属性: to, 用于指定跳转的路径.
<router-link>还有一些其他属性:
tag: tag可以指定<router-link>之后渲染成什么组件, 比如上面的代码会被渲染成一个<li>元素, 而不是
<router-link to='/home' tag='li'>
replace: replace不会留下history记录, 所以指定replace的情况下, 后退键返回不能返回到上一个页面中
active-class: 当<router-link>对应的路由匹配成功时, 会自动给当前元素设置一个router-link-active的class, 设置active-class可以修改默认的名称.
在进行高亮显示的导航菜单或者底部tabbar时, 会使用到该类.
但是通常不会修改类的属性, 会直接使用默认的router-link-active即可.
修改linkActiveClass
该class具体的名称也可以通过router实例的属性进行修改
exact-active-class
类似于active-class, 只是在精准匹配下才会出现的class.
后面看到嵌套路由时, 我们再看下这个属性.
一.在点击导航栏的时候，让被点击的那一个有背景色，其他的没有背景色？
代码语言：javascript复制
const router = new VueRouter({
routes,
linkActiveClass: 'is-active'
});
.is-active{
background:red;
}
这样<router-link>被点击激活的时候就会被加上is-active这个class了。注意如果没有设置router-link的标签类型，会是标签,标签是没有宽度和高度的。将<router-link>这样的a标签转化为li标签
代码语言：javascript复制
<router-link to='index' tag="li" event="mouseover">二.自己来操控 active Class 给加的位置，并不想它随着路由的改变而改变
假如侧边栏我的钱包，路由为’/myWallet’，在’/myWallet’页面可以操作提现，会进入’/withdraw’提现页面，路由发生变化，从’/myWallet’ 身上移到’/withdraw’上了。如何让 ‘/myWallet’ 这个页面的active Class 保留住呢？给’/withdraw’ 加上一个路由元信息，在侧边栏去检查路由元信息，然后看是否需要给其active class
代码语言：javascript复制
{
path: '/myWallet',
name: 'MyWallet',
component: MyWallet,
meta: {
requiresAuth: true,
active: '/MyWallet'
}
},
{
path: '/withdraw',
name: 'Withdraw',
component: withdraw,
meta: {
requiresAuth: true ,
active: '/MyWallet'
}
},
<router-link tag="li" class="li-item" to="/MyWallet" :class="{'is-active':$route.meta.active === '/MyWallet'}">我的钱包</router-link>
如果只有一个页面 对应一个active的,就不用添加 meta下面的active属性了
代码语言：javascript复制<router-link tag="li" class="li-item" to="/userinfo" :class="{'is-active':$route.path === '/userinfo'}"></router-link>路由代码跳转
有时候, 页面的跳转可能需要执行对应的JavaScript代码, 这个时候, 就可以使用第二种跳转方式了
比如, 我们将代码修改如下:
动态路由
在某些情况下，一个页面的path路径可能是不确定的，比如我们进入用户界面时，希望是如下的路径：
/user/aaaa或/user/bbbb
除了有前面的/user之外，后面还跟上了用户的ID
这种path和Component的匹配关系，我们称之为动态路由(也是路由传递数据的一种方式)。
