vue-router命名路由

最新推荐文章于 2023-02-27 22:53:14 发布

一个想走出去的码农

最新推荐文章于 2023-02-27 22:53:14 发布

阅读量115

点赞数

分类专栏： vue vue路由文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_51811318/article/details/116541483

版权

vue 同时被 2 个专栏收录

22 篇文章 1 订阅

订阅专栏

vue路由

7 篇文章 0 订阅

订阅专栏

vue-router命名路由

在这里插入图片描述

例子如下

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 导入js文件 -->
    <script src="lib/vue_2.5.22.js"></script>
    <script src="lib/vue-router_3.0.2.js"></script>
</head>

<body>

    <div id="app">
        <!-- 2.添加路由连接 -->
        <router-link to="/user/1">User</router-link>
        <router-link to="/user/2">User</router-link>
        <router-link :to="{name:'user',params:{id:3}}">User</router-link>
        <router-link to="/register">Register</router-link>
        <!--3.添加占位符  -->
        <!-- 路由填充位（也叫做路由占位符） -->
        <!-- 将来通过路由规则匹配到组件 会被渲染到这个位置 -->
        <router-view></router-view>
    </div>
    <script>
        var User = {
            props: ['id', 'uname', 'age'],
            template: `<div>
                User组件--用户的id是：{{uname}},{{age}},{{id}}
                </div>`
        }
        var Register = {
            template: `<div>Rgister组件</div>`
        }
        var router = new VueRouter({
            // router是路由规则数组

            routes: [

                // 每个路由规则都是一个配置对象 其中至少包含path和component两个属性
                // path表示当前路由规则匹配的hash地址
                // component表示当前路由对应的展示的组件
                { path: '/', redirect: '/user' },
                {
                    // 命名路由
                    name: 'user',
                    path: '/user/:id', component: User, props: route => ({
                        uname: 'zs', age: 12, id: route.params.id
                    })
                },
                { path: '/register', component: Register },
            ]
        })
        new Vue({
            el: '#app',
            router
        })

    </script>
</body>

</html>