使用路由
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌
- 安装
- vue项目创建时选择使用路由,项目将自动在根实例中注册 router 选项,
该 router 实例会注入到根组件下的所有子组件中,且子组件能通过 this.$router 访问到
- 假设vue项目创建没有选择使用路由,手动将路由注册到根实例中
- $ npm install vue-router --save
- 手动创建目录 src/router/index.js
- vue项目创建时选择使用路由,项目将自动在根实例中注册 router 选项,
- 使用路由(项目初始化选择使用路由后将自动生成下列代码)
import Vue from ‘vue‘
import Router from ‘vue-router‘
import Home from ‘@pages/home/Home‘
Vue.use(Router)
export default new Router({
routes: [{
path: ‘/‘,
name: ‘Home‘,
component: Home
}]
})
// 注册到根实例 // main.js
import router from ‘./router‘
new Vue({
el: ‘#app‘,
router,
components: { App },
template: ‘<App/>‘
})
前端路由优缺点
优点
用户体验好,不需要每次都从服务器全部获取,快速展现给用户
缺点
不利于SEO
使用浏览器前进,后退的时候会从新发送请求,没有合理的利用缓存
单页面无法记住之前滚动的位置,无法在前进,后退的时候记住滚动的位置
动态路由匹配,注意是route不是router
模式 | 匹配路径 | this.$route.params |
---|---|---|
/goods/:goodsId | /goods/0001 | { goodsId: ‘0001‘ } |
/goods/:goodsId/user/:name | /goods/0001/user/iphone | { goodsId: ‘0001‘, name: ‘iphone‘ } |
嵌套路由
// router/index.js
routes: [{
path: ‘/user/:id‘,
component: User,
children: [{
// 当 /user/:id/profile 匹配成功,
// UserProfile 会被渲染在 User 组件的 <router-view> 中
path: ‘profile‘, // 注意不要加斜杠/profile,加了斜杠就是根路由
component: UserProfile
}, {
// 当 /user/:id/posts 匹配成功
// UserPosts 会被渲染在 User 组件的 <router-view> 中
path: ‘posts‘,
component: UserPosts
}]
}]
<router-link to="/user/001/profile">跳转</router-link>
编程式路由
编程路由就是通过js来实现页面的跳转
this.$router.push(params)
this.$router.replace(params)
router.replace唯一的不同就是,它不会向history添加新记录, 替换掉当前的history记录。也就是没有前进后退功能
params: 可以是字符串,对象和参数传递
注意: 这里获取使用的是this.route.query(url地址问号拼接的参数)和获取的动态路由.params(动态参数)不同
params | 跳转路径 | this.$route.query | this.$route.params |
---|---|---|---|
‘/home‘ | /home | ||
{path: ‘/home‘} | /home | ||
{path: ‘/home?user=jack‘} | /home?user=jack | {user: ‘jack‘} | |
{path: ‘/home‘,query:{user:‘jack‘,pass:‘1234‘}} | /home?user=jack&pass=1234 | {user:‘jack‘,pass:‘1234‘} | |
{name: ‘user‘, params: {userId: ‘123‘}} | /user/123 | {userId:‘123‘} | |
{path: ‘/user?count=10‘, params: { userId: ‘123‘ }} | /user?count=10 | {count: 10} |
注意:name是路由配置里面的name的值(命名路由),如果提供了 path,params 会被忽略,
router.go(n)
这个方法的参数是一个整数,意思是在 history 记录中向前或者后退多少步
操作 History
router.push、 router.replace 和 router.go 跟 window.history.pushState、 window.history.replaceState 和 window.history.go好像,实际上它们确实是效仿 window.history API 的
命名路由
routes: [{
path:‘/user/:userId‘,
name: ‘user‘,
component: User
}]
// 要链接到一个命名路由,可以给router-link的to属性传一个对象:
<router-link :to="{ name: ‘user‘, params: { userId: 123 }}">User</router-link>
// 和编程式路由调用一样router.push({ name: ‘user‘, params: { userId: 123 }})
命名视图
使用场景:有时候想同时(同级)展示多个视图,而不是嵌套展示,例如创建一个布局
<router-view class="view one"></router-view>
<router-view class="view two" name="sidebar"></router-view>
<router-view class="view three" name="main"></router-view>
// 路由配置
routes: [{
path: ‘/‘,
components: {
default: Foo, // 没有给name属性的router-view默认渲染视图
sidebar,
main
}
}]
vue router-link 渲染a标签的问题 tag属性
vue默认跳转router-link使用a标签渲染,当我们不想使用a标签渲染时,又想使用跳转功能可以使用tag属性,来代替a标签渲染,例如:
<ul>
// 页面最终会以li标签渲染,
<router-link tag="li" to="/">列表1</router-link>
</ul>
路由懒加载
当打包构建应用时,JavaScript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。
// router 配置
routes: [{
path: ‘/user‘,
name: ‘user‘,
component: () => import(‘./my-async-component‘)
}]
// 全局组件配置
Vue.component(‘async-component‘, () => import(‘./my-async-component‘)))
// 局部组件配置
export default {
// ....
components: {
‘async-component‘: () => import(‘./my-async-component‘)
}
}
更多路由配置查看
原文地址:https://www.cnblogs.com/JunLan/p/12687254.html