Vue-路由2 给路由传参

一、方式1—通过?传递参数

实质

在url中通过 ? 给路由对应的组件传递参数的方式，vue实例会将传递的参数放在$route.query对象中。

注意：

通过?的方式传递参数时，不用修改路由实例中的routes中对象的path路径
在path对应组件中通过 this.$route.query.参数来获取传递的参数
这种传参方式的参数可以不传，仍然可以访问到对应组件

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../lib/vue.js"></script>
    <script src="../lib/vue-router.js"></script>
</head>
<body>
    <div id="app">
<!--        5.router-link-->
<!--        给/login传递name值，可以不传递参数-->
        <router-link to="/login?name=Seven">登录</router-link>
        <router-link to="/register">注册</router-link>

<!--        4.router-view-->
        <router-view></router-view>
    </div>
<script>
    // 1.定义组件模板
    // 通过$route.query获取传过来的参数
    var login = {
        template: '<h1>登录组件,name={{$route.query.name}}</h1>',
    }
    var register = {template: '<h1>注册组件</h1>'}

    // 2.定义路由实例
    var router = new VueRouter({
        routes: [
            {path: '/login', component: login},
            {path: '/register', component: register}
        ]
    })

    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {},
        router  // 3.注册路由，该写法相当于 router: router
    })
</script>
</body>
</html>

方式2—通过:传递参数

实质

通过 : 给路由对应的组件传递参数的方式，vue实例会通过 $route.matched中的正则表达式解析url，然后将参数放入 $route.params中。

注意：

用 : 的方式传递参数，要修改路由中的path路径
在path对应的组件中通过$route.params.参数来获取参数
这种传递方式需要完全匹配path路径，即一定要传递参数，否则访问不到该对应组件

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../lib/vue.js"></script>
    <script src="../lib/vue-router.js"></script>
</head>
<body>
    <div id="app">
<!--        5.router-link-->
<!--        注意：必须把参数传递完-->
        <router-link to="/login/Seven/123">登录</router-link>
        <router-link to="/register">注册</router-link>

<!--        4.router-view-->
        <router-view></router-view>
    </div>
<script>
    // 1.创建组件模板对象
    // 通过$route.params来获取参数
    var login = {template: '<h1>登录组件,name={{$route.params.username}},pwd={{$route.params.pwd}}</h1>'}
    var register = {template: '<h1>注册组件</h1>'}

    // 2.创建路由实例
    var router = new VueRouter({
        routes: [
            {path: '/login/:username/:pwd', component: login},  // 注意：路径后要用：来说明要传递的参数
            {path: '/register', component: register}
        ]
    })

    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {},
        router // 3.注册路由
    })
</script>
</body>
</html>

更新时间：2019-12-22

来源：CSDN

作者：SevenSongyun

链接：https://blog.csdn.net/SevenSongyun/article/details/103652736

标签

vue

路由

vue路由