vue-router命名路由

最新推荐文章于 2024-07-21 00:03:27 发布

爬楼梯的小新

最新推荐文章于 2024-07-21 00:03:27 发布

阅读量214

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_57607714/article/details/119295821

版权

vue 专栏收录该内容

62 篇文章 1 订阅

订阅专栏

命名路由的配置规则

为了更方便的表示路由的路径可以给路由规则起个别名

<!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>命名路由</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <!-- 导入vue-router -->
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>

<body>
    <div id="app">
        <!-- router-link 默认渲染为一个a标签 -->
        <router-link to="/user/1">user1</router-link>
        <router-link to="/user/2">user2</router-link>
        <router-link :to="{name:'user',params:{id:3}}">user3</router-link>
        <router-link to="/login">用户登录</router-link>

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

</html>
<script>
    //组件的模版对象
    const user = {
        props: ['id', 'uname', 'age'], //接受
        template: '<div>用户信息：{{id + " "+ uname+ " " +age}}</div>' //使用
            // template: '<h1>user组件 用户id为{{$route.params.id}}</h1>'
    }
    const login = {
        template: '<h1>用户登录组件</h1>'
    }

    //创建一个路由对象
    const routerObj = new VueRouter({
        //所有的路由规则
        routes: [{
            path: '/',
            redirect: '/user'
        }, { //命名路由
            name: 'user',
            path: '/user/:id',
            component: user,
            //当props是一个函数 则这个函数接受route对象为自己的形参
            props: route => ({
                id: route.params.id, //动态值
                uname: '嘎达', //静态值
                age: 12,
            })
        }, {
            path: '/login',
            component: login
        }]
    })

    //创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
        el: '#app',
        data: {
            msg: ''
        },
        methods: {},
        router: routerObj //将路由规则对象，注册到 vm 实例上，用来监听 URL 地址的变化，然后展示对应的组件
    });
</script>

爬楼梯的小新

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
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-wid.
复制链接

扫一扫

专栏目录