vueRouter-命名路由
vueRouter-命名路由
tianyawhl 发表于1个月前
vueRouter-命名路由
  • 发表于 1个月前
  • 阅读 3
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 十分钟定制你的第一个小程序>>>   

有时候通过一个名称来识别一个路由显得更方便,特别是在链接一个路由,或者是执行一些跳转的时候,
你可以在创建Router实例的时候,在routers配置中为某个路由设置名称

 routes: [{
    path: "/user/:userId",
    name: "user",
    component: User
    }]
    })
要链接到一个命名路由,可以给router-link的to属性传一个对象
<router-link :to="{name:'user',params:{userId:123}}">User</router-link>
这跟代码调用router.push()是一回事
router.push({name:'user',params:{userId:123}})
这两种方式都会把路由导航到/user/123路径

完整的一个例子:

<body class="">
    <script src="../js/vue.js"></script>
    <script src="../js/vue-router.js"></script>
    <div id="app">
        <h1>Named Routes</h1>
        <p>current route name:{{$route.name}}</p>
        <ul>
            <li>
                <router-link :to="{name:'home'}">home</router-link>
            </li>
            <li>
                <router-link :to="{name:'foo'}">foo</router-link>
            </li>
            <li>
                <router-link :to="{name:'bar',params:{id:123}}">bar</router-link>
            </li>
        </ul>
        <router-view class="view"></router-view>
    </div>
    <script>
    const Home = { template: `<div>this is Home</div>` }
    const Foo = { template: `<div>this is Foo</div>` }
    const Bar = { template: `<div>this is bar {{$route.params.id}}</div>` }
    const router = new VueRouter({

        routes: [
            { path: '/', name: 'home', component: Home },
            { path: '/foo', name: 'foo', component: Foo },
            { path: '/bar/:id', name: 'bar', component: Bar }
        ]
    })
    const app = new Vue({ router }).$mount("#app")
    </script>
</body>

 

共有 人打赏支持
粉丝 2
博文 151
码字总数 56904
×
tianyawhl
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: