vueRouter-命名路由原

tianyawhl

发布于 2019-04-04 15:27:15

3550

发布于 2019-04-04 15:27:15

有时候通过一个名称来识别一个路由显得更方便，特别是在链接一个路由，或者是执行一些跳转的时候，你可以在创建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>

(adsbygoogle = window.adsbygoogle || []).push({});

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2017/09/12 ，如有侵权请联系 cloudcommunity@tencent.com 删除

vue.js

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

vue.js

登录后参与评论

0 条评论

热度