【轻松学vue】vue.js基础入门教程（十三）路由模块

vue路由模块

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

<div id="app">
    <p>
        <!--router-link组件做导航-->
        <!--to指定url地址的变化-->
        <router-link to="/home">首页</router-link>
        <router-link to="/about">关于</router-link>
    </p>
    <!--路由出口-->
    <router-view></router-view>
</div>
<script>
    //定义路由组件
    var home = {
        template:"<div>首页内容</div>"
    }
    var about = {
        template:"<div>关于页内容</div>"
    }
    //定义路由，每个路由映射一个组件
    var routes=[
        {path:'/home',component:home},
        {path:'/about',component:about}
    ];
    //创建router实例，传入routes配置
    var router = new VueRouter({
        routes:routes
    })
    var app = new Vue({
        el:"#app",
        router:router
    })
</script>

1）<router-link>相关属性

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

<div id="app">
<!--       字符串 -->
        <router-link to="home">home</router-link>
<!--        使用v-bindjs表达式-->
        <router-link v-bind:to="'home'">home</router-link>
<!--        绑定一个对象-->
        <router-link v-bind:to="{path:'home'}">home</router-link>
<!--        命名的路由-->
        <router-link v-bind:to="{name:'user',params:{userId:123}}">user</router-link>
<!--        带查询参数-->
        <router-link v-bind:to="{path:'register',query:{plan:'private'}}">register</router-link>
</div>

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

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

replace

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

<router-link to="/home" replace>首页</router-link>

append

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

<router-link v-bind:to="{path:'about',append:'true'}">关于</router-link>

tag
有时候想要 <router-link> 渲染成某种标签，例如 <li>。 于是我们使用 tag 指定何种标签，同样它还是会监听点击，触发导航。

<router-link to="/about" tag="li">关于</router-link>

active-class

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

<style>
    .active{
        background: red;
    }
</style>
<router-link to="/home" active-class="active">首页</router-link>
<router-link to="/about" active-class="active">关于</router-link>

exact-active-class

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

event

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

<router-link to="/home" exact-active-class="active" event="mouseover">首页</router-link>

QQ：732005030
扫码加微信