Vue Router的使用

Vue Router的使用

Vue Router作为vue单页面项目开发是必不可少的,需要处理每个页面之间的切换,那么今天就快速简要的介绍一下Vue Router的使用方法

1.  Vue Router简介+安装

Vue RouterVue.js 官方的路由管理器

安装

vue add router

安装成功后,重启项目,会看到多了一个router的文件夹,这里面就是创建我们项目路由的地方

提示: 如果刚创建的新项目可以直接添加,但是如果是项目开发了一部分了,添加的时候vue router会修改页面的布局,在安装的时候要选择性的去安装使用。

2. 路由规划、配置,router/index.js

App.vue
<!-- 路由的导航  -->
<nav>   
    <router-link to="/">首页</router-link>    
    <router-link to="/about">管理</router-link> 
</nav>
<!-- 路由的出口 -->
<router-view></router-view>

3. 动态路由匹配

我们经常需要把某种模式匹配到的所有路由,全都映射到同个组件。例如,我们有一个 User 组件,对 于所有 ID 各不相同的用户,都要使用这个组件来渲染。那么,我们可以在 vue-router 的路由路径中 使用“动态路径参数”(dynamic segment) 来达到这个效果:

{ path: '/user/:id', component: User }

范例:查看课程详情,views/Detail.vue

<div>   
    <h2>detail page</h2>   
    <p>{{$route.params.name}} ...</p> 
</div>

router/index.js

{   
    path: '/course/:name',   
    component: () => import('../views/Detail.vue') 
}

列表中的导航,About.vue

<router-link :to="`/course/${c.name}`"> 
{{ c.name }} - {{ c.price | currency('¥') }} 
</router-link>

4. 通配符的使用

通配符适合做404页面路由,当没有所点击的路由,或者找不到时,都会匹配到通配符下的路由页面

{ 
    // 会匹配所有路径 
    path: '*', 
    component: () => import('../views/404.vue') 
}

5. 嵌套路由

实际生活中的应用界面,通常由多层嵌套的组件组合而成。同样地,URL 中各段动态路径也按某种结构 对应嵌套的各层组件,例如:

范例:嵌套方式显示课程详情

<router-link :to="`/about/${c.name}`">   
    {{ c.name }} - {{ c.price | currency('¥') }} 
</router-link>
<router-view></router-view>

路由配置

{    
    path: '/about',    
    name: 'about',    
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'),    
    children: [{        
        path: ':name',        
        component: () => import('../views/Detail.vue')     
    },] 
}

响应路由参数变化,Detail.vue

export default { 
    watch: {   
        $route: {     
            handler: () => {       
                console.log("$route change");     
            },     
            immediate: true   
        } 
    } 
};

6. 编程导航

借助 router 的实例方法,可编写代码来实现编程式导航
router.push(location, onComplete?, onAbort?)

// 字符串 
router.push('home')

// 对象 
router.push({ path: 'home' })

// 命名的路由 
router.push({ name: 'user', params: { userId: '123' }})

// 带查询参数,变成 
/register?plan=private router.push({ path: 'register', query: { plan: 'private' }})

范例:修改为课程详情跳转为编程导航

<div @click="selectedCourse = c;$router.push(`/about/${c.name}`)">   
    {{ c.name }} - {{ c.price | currency('¥') }}
</div>

7. 命名路由

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

const router = new VueRouter({  
    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 }})

 

微信关注“优月优”公众号,获取免费赠书。
提醒:本站所有图书/视频资源均索引自互联网,版权争议与本站无关。如有侵权或其他争议的可能性,请发起版权投诉,因本站未参与任何制作、转制、存储等任一环节,故无法对涉及到的资源进行删除,本站会依据DMCA原则, 对涉及的资源链接进行删除。因为所有图书资源均不属于本站,本站只提供索引服务,故本站不保证任何资源的准确性,权威性,请使用者自行判断。
微信公众号
关注我们,每天及时接收最新的学习资料
12000人已关注
分享到:
赞(3) 打赏

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏