Vue-router2.0基础，秒会。

来源：互联网发布：gps数据统计分析编辑：程序博客网时间：2024/05/21 06:53

如果不是模块式开发，请先引入

<script src="https://unpkg.com/vue/dist/vue.js"></script><script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

1.0基础

<div id="app">    <h1>Hello App!</h1>    <p>        <router-link to="/foo">Go to Foo</router-link>        <router-link to="/bar">Go to Bar</router-link>    </p>    <router-view></router-view></div>

// 0. 如果使用模块化机制编程，導入Vue和VueRouter，要调用 Vue.use(VueRouter)const Foo = { template: '<div>foo</div>' }const Bar = { template: '<div>bar</div>' }const routes = [    { path: '/foo', component: Foo },    { path: '/bar', component: Bar }]const router = new VueRouter({    routes // （缩写）相当于 routes: routes})const app = new Vue({    router}).$mount('#app')

2.0动态路由匹配

<div id="app">    <h1>Hello App!</h1>    <p>        <router-link to="/user/abc">Go to abc</router-link>        <router-link to="/user/cba">Go to cba</router-link>    </p>    <router-view></router-view></div>

const User = {    template: '<div>User {{ $route.params.id }}</div>',    '$route'(to,from){        console.log('从'+from.params.id+'到'+to.params.id)    }}const router = new VueRouter({    routes: [        // 动态路径参数 以冒号开头        { path: '/user/:id', component: User }    ]})const app = new Vue({    router}).$mount('#app')

3.0嵌套路由

<div id="app">    <h1>Hello App!</h1>    <p>        <!-- 使用 router-link 组件来导航. -->        <!-- 通过传入 `to` 属性指定链接. -->        <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->        <router-link to="/user/foo/profile">Go to profile</router-link>        <router-link to="/user/foo/posts">Go to posts</router-link>        <router-link to="/user/foo">Go to home</router-link>    </p>    <!-- 路由出口 -->    <!-- 路由匹配到的组件将渲染在这里 -->    <router-view></router-view></div>

const User = {    template: `    <div class="user">      <h2>User {{ $route.params.id }}</h2>      <router-view></router-view>    </div>  `}const UserProfile = {    template: '<div>UserProfile</div>'}const UserPosts = {    template: '<div>UserPosts</div>'}const UserHome = {    template: '<div>UserHome</div>'}const router = new VueRouter({    routes: [        { path: '/user/:id', component: User,            children: [                {                    // 当 /user/:id/profile 匹配成功，                    // UserProfile 会被渲染在 User 的 <router-view> 中                    path: 'profile',                    component: UserProfile                },                {                    // 当 /user/:id/posts 匹配成功                    // UserPosts 会被渲染在 User 的 <router-view> 中                    path: 'posts',                    component: UserPosts                },                {   path: '',                    component: UserHome                }            ]        }    ]})const app = new Vue({    router}).$mount('#app')

4.0编程式导航

<div id="app">    <h1>Hello App!</h1>    <p>        <!-- 使用 router-link 组件来导航. -->        <!-- 通过传入 `to` 属性指定链接. -->        <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->        <router-link to="/user/foo">Go to foo</router-link>    </p>    <!-- 路由出口 -->    <!-- 路由匹配到的组件将渲染在这里 -->    <router-view></router-view>

const User = {    template: `    <div class="user">      <h2>User {{ $route.params.id }}</h2>    </div>  `}const Login = {    templete:`    <div>login</div>  `}const router = new VueRouter({    routes: [        {            path: '/user/:id', component: User,        },        {            path: '/login',component:Login        }    ]})const app = new Vue({    router}).$mount('#app')router.push({ path: 'login', query: { plan: 'private' }});

5.0命名路由

<div id="app">    <h1>Hello App!</h1>    <p>        <router-link :to="{name:'user',params:{userId:123}}">Go to 123</router-link>        <router-link to="/user/123">Go to 123</router-link>    </p>    <!-- 路由出口 -->    <!-- 路由匹配到的组件将渲染在这里 -->    <router-view></router-view></div>

const User = {    template: `    <div class="user">      <h2>User {{ $route.params.id }}</h2>    </div>  `}const router = new VueRouter({    routes: [        {            path: '/user/:userId',            name:'user',            component: User        }    ]})const app = new Vue({    router}).$mount('#app')

6.0命名视图

<div id="app">    <h1>Hello App!</h1>    <!-- 路由出口 -->    <!-- 路由匹配到的组件将渲染在这里 -->    <router-view class="view"></router-view>    <router-view class="view" name="a"></router-view>    <router-view class="view" name="b"></router-view></div>

const Foo = {    template:'<div>I am Foo</div>'}const Bar = {    template:'<div>I am Bar</div>'}const Baz = {    template:'<div>I am Baz</div>'}const router = new VueRouter({    routes: [        {            path: '/',            components: {                default:Foo,                a:Bar,                b:Baz            }        }    ]})const app = new Vue({    router}).$mount('#app')

github完整代码地址https://github.com/hua1995116/vue/tree/master/vue-router

0 0