vue-router命名路由

最新推荐文章于 2024-03-11 20:34:25 发布

Bear Cookie

最新推荐文章于 2024-03-11 20:34:25 发布

阅读量196

点赞数

文章标签： vue vue-router vue-router命名路由

本文链接：https://blog.csdn.net/weixin_45753455/article/details/103304780

版权

1.当路径比较多比较复杂的时候，使用命名路由，代替路径实现路由跳转
2.命名路由你可以在创建 Router 实例的时候，在 routes 配置中给某个路由设置名称。

 <body>
         <!-- 引入vue-router模块 给我们抛出两个全局组件router-link==>a to==>href,router-view==>路由匹配组件的出口 -->
    <div id="app">
            <router-link :to="{name:'login'}">登陆</router-link>
            <!--用to属性绑定路由配置里的name属性-->
            <router-link :to="{name:'register'}">注册</router-link>
            <router-view></router-view>
    </div>
  
    <script src="./node_modules/vue/dist/vue.js"></script>
    <!-- 引入vue模块 -->
    <script src="./node_modules/vue-router/dist/vue-router.js"></script>
    <!-- 引入vue-router模块 -->
    <script>
        var Login = {
            template: '<div>我是登陆页面</div>'
        };
        var Register = {
            template: '<div>我是注册页面</div>'
        };
       
        var router = new VueRouter({ //  创建router对象
            routes: [ // 配置路由对象
                // 路由匹配的规则
                {
                    path: '/login',
                    name:'login',//在这里设置name属性来代表这条路由
                    component: Login,
                },
                {
                    path: '/register',
                    name:'register',
                    component: Register,
                },
            ]
        });
       
        new Vue({
            el: '#app',
            data() {
                return {

                }
            },           
            router,//即 router：router，交给vue实例化对象管理

        });
    </script>
</body>