【老司机带你飞】vue.js基础入门教程（十三）

vue路由模块

路由：通过不同的url访问不同的内容
需要引入vue-router.js文件，如果是脚手架环境，我们需要下载相应模块

    

        
        
        首页
        关于
    
    
    

1）相关属性

to
表示目标路由的链接。 最终会生成a标签

        home

        home

        home

        user

        register

使用命名的路由，必须在路由配置中存在该路由命名，否则会产生错误，如上命名的路由，必须做如下配置

var router = new VueRouter({
    routes: [
        {path:"/user/:userId",name:'user'}
    ]
});

replace

设置replace属性的话，导航后不会留下history记录（即后退键不会被激活）

首页

append

设置 append 属性后，则在当前 (相对) 路径前添加基路径。例如，我们从 /a 导航到一个相对路径 b，如果没有配置 append，则路径为 /b，如果配了，则为 /a/b

关于

tag
有时候想要 渲染成某种标签，例如

。 于是我们使用 tag 指定何种标签，同样它还是会监听点击，触发导航。

关于

active-class

设置链接激活时使用的css类名。

首页
关于

exact-active-class

配置当链接被精确匹配的时候应该激活的 class。
active-class和exact-active-class区别：
active-class：只要包含/home（如/home/1），即可匹配成功
exact-active-class：必须是/home

event

声明可以用来触发导航的事件。鼠标移上内容变更

首页

QQ：732005030
扫码加微信