VueRouter-动态路由

用法：

在url中，通过定义参数，那么以后url中就可以动态的传递这些参数。语法：`/our/:参数名`

        let router = new VueRouter({
            routes: [
                {
                   // user为参数
                    path: "/our/:user",
                    component: our
                }
            ]
        })

　　2. 在组件中，可以通过`this.$route.params.参数名`拿到；在组件的模板中可以通过`$route.params.参数名`拿到。

        var our = Vue.extend({
            template: "<h1>欢迎,{{$route.params.user}}</h1>"
        })

`this.$route`和`this.$router`的区别：

1、`this.$route`：代表的是当前这个路由里的一些信息，如：`params`、`query`、`fullPath`等

2、`this.$router`：代表的是全局`VueRouter`对象。

整体代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <title>VueRouter-动态路由</title>
</head>

<body>
    <div id="app">
        <ul>
            <li>
                <router-link to="/">首页</router-link>
            </li>
            <li>
                <router-link to="/our/Xsan">我们</router-link>
                </router-link>
            </li>
        </ul>
        <router-view></router-view>
    </div>
    <script>
        var index = Vue.extend({
            template: "<h1>首页</h1>"
        })
        var our = Vue.extend({
            template: "<h1>欢迎,{{$route.params.user}}</h1>"
        })
        let router = new VueRouter({
            routes: [{
                    path: "/",
                    component: index
                },
                {
                    path: "/our/:user",
                    component: our
                }
            ]
        })
        new Vue({
            el: "#app",
            router: router,
            data: {

            }
        })
    </script>
</body>

</html>

相关阅读:
页面布局方案-上固定，下自适应
页面布局方案-左右固定，中间自适应
身心疲惫
生产计划拆分说明-班组绩效匹配算法
CSS代码片段
常见内部函数----Python
pyramid的第一个项目
2015年大连国际马拉松半程经历
高效时间管理
《番茄工作法图解》第四章读书笔记

原文地址：https://www.cnblogs.com/xshan/p/12359334.html