HTML5的History模式

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.

后面看到嵌套路由时, 我们再看下这个属性.

一.在点击导航栏的时候，让被点击的那一个有背景色，其他的没有背景色？

const router = new VueRouter({
    routes,
    linkActiveClass: 'is-active'
});
.is-active{
  background:red;
}

这样<router-link>被点击激活的时候就会被加上is-active这个class了。注意如果没有设置router-link的标签类型，会是标签,标签是没有宽度和高度的。将<router-link>这样的a标签转化为li标签

<router-link to='index' tag="li" event="mouseover">

二.自己来操控 active Class 给加的位置，并不想它随着路由的改变而改变

假如侧边栏我的钱包，路由为’/myWallet’，在’/myWallet’页面可以操作提现，会进入’/withdraw’提现页面，路由发生变化，从’/myWallet’ 身上移到’/withdraw’上了。如何让 ‘/myWallet’ 这个页面的active Class 保留住呢？给’/withdraw’ 加上一个路由元信息，在侧边栏去检查路由元信息，然后看是否需要给其active class

{
  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属性了

<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的匹配关系，我们称之为动态路由(也是路由传递数据的一种方式)。