vue-router2.0

Posted 2020-09-20 Ethan

vue中路由的简单实用

1.路由的简单配置

export default new Router({
    routes: [
    {
        path: ‘/‘,
        name: ‘Hello‘,
        component: Hello
    },
    {
        path: ‘/header‘,
        name: ‘Header‘,
        component: Header
    }
    ]
})    

 

2.路由的跳转

注意：在[email protected]中路由是由v-link来改变路由的，但是在[email protected]中我们使用router-link 组件来导航.我们需要做的是，将组件(components)映射到路由(routes)，然后告诉 vue-router 在哪里渲染它们。

<div class="list-group">
　　<!-- 通过传入 `to` 属性指定链接. -->
　　<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
　　<router-link to="/">Go to home</router-link>
　　<router-link to="/header">Go to header</router-link>
　　<!-- 路由出口 --> 
　　<!-- 路由匹配到的组件将渲染在这里 -->

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