Vue-router传参

最新推荐文章于 2024-04-27 22:13:08 发布

吃瓜的阳大王

最新推荐文章于 2024-04-27 22:13:08 发布

阅读量65

点赞数

文章标签： vue html5 vue.js

本文链接：https://blog.csdn.net/qq_44822110/article/details/104802294

版权

Vue-router传参

HTML

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-router传参</title>

</head>

<body>
    <div id="app">
        <div>
            <router-link to="/">首页</router-link>
            <router-link to="/about">关于我们</router-link>
            <router-link to="/user/王花花">王花花</router-link>
            <router-link to="/user/李栓蛋?age=100">李栓蛋</router-link>
            <router-link to="/qhy/qhy?age=100">qhy</router-link>
        </div>
        <div>
            <router-view></router-view>
        </div>
    </div>
    <script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
    <script src="https://cdn.bootcss.com/vue-router/2.7.0/vue-router.js"></script>
    <script src="index.js"></script>
</body>

</html>

JS

// 直接在数组中以对象的方式定义规则(组件)[{path:'',component{}},{path:'',component{}}]
var routes = [{
        path: '/',
        component: {
            template: '<div><h1>首页</h1></div>'
        },

    },
    {
        path: '/about',
        component: {
            template: '<div><h1>关于我们</h1></div>'
        }
    }, {
        path: '/user/:name',
        component: {
            // 传参方式一
            // $route.params.name  获取HTML传回来的/user/:name 后面的 :name值 
            // 此案例传回的name值是HTML写在to="/user/王花花"里面的王花花  李栓蛋 
            template: '<div><h1>我叫：{{$route.params.name}}</h1>' +
                // 传参方式二
                // $route.query.age  获取HTML传回来的/user/:name?age=18 后面的 ?age值 
                // 此案例传回的age值是HTML写在to="/user/王花花?age=18"里面的18岁
                '<h1> 我今年：{{ $route.query.age }}岁了</h1></div> '
        }
    }, {
        path: '/qhy/:qhyabc',
        component: {
            // 传参方式一
            // $route.params.name  获取HTML传回来的/user/:name 后面的 :name值 
            // 此案例传回的name值是HTML写在to="/user/王花花"里面的王花花  李栓蛋 
            template: '<div><h1>我叫：{{$route.params.qhyabc}}</h1>' +
                // 传参方式二
                // $route.query.age  获取HTML传回来的/user/:name?age=18 后面的 ?age值 
                // 此案例传回的age值是HTML写在to="/user/王花花?age=18"里面的18岁
                '<h1> 我今年：{{ $route.query.age }}岁了</h1></div> '
        }
    }
]

// 总结：
// <router-link to="/qhy/qhy?age=100">qhy</router-link>
// 要获取 / 后面的值 qhy 需要在 path指定 path: '/qhy/:qhyabc', 然后用$route.params.qhyabc来获取qhy的值
// 要获取 ？ 后面的值 age=100  直接用 $route.query.age来获取

var router = new VueRouter({
    routes: routes
})

new Vue({
    el: '#app',
    router: router
})

吃瓜的阳大王

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue-router传参

Vue-router传参HTML<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <t...
复制链接

扫一扫