vue之vue-router

vue-router demo

第一个vue-router例子

html代码

<div id="app">
    <div>
        <!-- <router-link> 默认会被渲染成一个 a标签 -->
        <router-link to="/home">首页</router-link>
        <router-link to="/news">新闻</router-link>
    </div>
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
</div>

js代码

<!-- 引入vue环境 -->
<script src="./js/vue.js"></script>
<!-- 引入vue-router环境 -->
<script src="./js/vue-router.js"></script>
<script>
    // 1. 定义（路由）组件。
    var Home = { template: "<div>home</div>" }
    var News = { template: "<div>news</div>" }
    // 2. 定义路由
    var routes = [
        {path: "/home", component: Home},
        {path: "/news", component: News}
    ]
    // 3. 创建 router 实例，然后传 `routes` 配置
    var router = new VueRouter({
        routes
    });
    // 4. 创建和挂载根实例。
    new Vue({
        el: "#app",
        router
    });
</script>

动态路由配置

我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件，这时可以使用动态路由
一个『路径参数』使用冒号 : 标记。当匹配到一个路由时，参数值会被设置到 this.$route.params，可以在每个组件内使用

html代码

<div id="app">
    <div>
        <router-link to="/home/user">/home/user</router-link>
        <router-link to="/home/bar">/home/bar</router-link>
    </div>
    <router-view></router-view>
</div>

js代码

var User = {
    <!-- this.$route.params 拿到动态参数 -->
    template: "<div>home {{$route.params.id}}</div>"
}
var routes = [
    {path: "/home/:id", component: User}
]
var router = new VueRouter({
    routes
});
new Vue({
    router,
    el: "#app"
});

嵌套路由

html代码

div id="app">
    <div>
        <router-link to="/home/user">/home/user</router-link>

    </div>
    <router-view></router-view>
</div>
<!-- 父组件 -->
<template id="user">
    <div>
        user
        <router-link to="/home/user/aaa">aaaa</router-link>

        <router-view></router-view>
    </div>

</template>

js代码

var User = {
    template: "#user"
}
var UserHome = {
    template: "<div>1111111111111</div>"
}
var routes = [
    {
        path: "/home/:id", component: User,
        <!-- children 里面是子路由 -->
        children:[
            { path: 'aaa', component: UserHome },
        ]
    }
]
var router = new VueRouter({
    routes
});
new Vue({
    router,
    el: "#app"
});

命名路由 params模式

有时候，通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候。你可以在创建 Router 实例的时候，在 routes 配置中给某个路由设置名称。

html代码

<div id="app">
    <div>
        <!-- 这里一定要用name -->
        <router-link :to="{name: 'home',params: {id: 123} }">home</router-link>
    </div>
    <router-view></router-view>
</div>

js代码

var Home = {
    <!-- $route.params.id拿到参数 -->
    template: "<div>home {{ $route.params.id }}</div>"
}
var routes = [
    {path: "/home/:id", name: 'home', component: Home}
]
var router = new VueRouter({
    routes
});
new Vue({
    router,
    el: "#app"
});

结果

/home/123

路由传参 query模式

html代码

<div id="app">
    <div>
        <router-link :to="{path: '/home',query: {id: 123} }">home</router-link>
    </div>
    <router-view></router-view>
</div>

js代码

var Home = {
    <!-- $route.query.id拿到参数 -->
    template: "<div>home {{ $route.query.id }}</div>"
}
var routes = [
    {path: "/home", component: Home}
]
var router = new VueRouter({
    routes
});
new Vue({
    router,
    el: "#app"
});

结果

home?id=123