路由 — Vue.js (opens new window)
后端路由工作方式:由后台服务器对 URL 进行解析,并返回结果(服务器渲染) 前端路由工作方式:由前端处理 URL 的跳转,前端通过数据 API 与后台服务器进行通信,通常是 SPA 应用
是谁处理 URL 路由和页面之间的关系?
# 前端路由 hash / history
HTML5 History 模式 | Vue Router (opens new window)
url中#(hash)的含义 - SegmentFault 思否 (opens new window)
vue-router的两种模式(hash和history)及区别_xiaokanfuchen86的博客-CSDN博客 (opens new window)
# vue router 的安装与使用
npm install vue-router
第一步:导入路由对象,并且调用 Vue.use(VueRouter)
第二步:创建路由实例,并且传入路由映射配置
第三步:在Vue实例中挂载创建的路由实例
// ./src/router/index.js
// 配置路由相关的信息
import VueRouter from 'vue-router'
import Vue from 'vue'
// 1.通过Vue.use(插件), 安装插件
Vue.use(VueRouter)
// 2.创建VueRouter对象
const routes = [
]
const router = new VueRouter({
// 配置路由和组件之间的应用关系
routes,
mode: 'history',
linkActiveClass: 'active'
})
// 3.将router对象传入到Vue实例
export default router
// ./src/main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
new Vue({
router, // 4. 使用 router
render: h => h(App)
}).$mount('#app')
# vue-router 的映射关系基础配置
第一步: 创建路由组件
第二步: 配置路由映射: 组件和路径映射关系
第三步: 使用路由: 通过 <router-link>
和 <router-view>
// VueRouter对象
const routes = [
{
path: '',
redirect: '/home' // 重定向配置
},
{
path: '/home',
component: Home // 组件路由配置
},
];
const router = new VueRouter({
routes,
mode: 'history', // history 模式(默认是 hash 模式)
// [API 参考 | active-class](https://router.vuejs.org/zh/api/#active-class )
linkActiveClass: 'active' // router-link active 类名默认值是 router-link-active
})
# router-link
API 参考 | router-link (opens new window)
不使用 router-link,自己使用 js 处理路由跳转
编程式的导航 | Vue Router (opens new window)
# 动态路由
动态路由匹配 | Vue Router (opens new window)
# 路由懒加载
路由懒加载 | Vue Router (opens new window)
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
}
]
# 嵌套路由
嵌套路由 | Vue Router (opens new window)
# 路由组件传参
路由组件传参 | Vue Router (opens new window)
router-link Props | Vue Router (opens new window)
- 路由跳转
<!-- 在路径中传递参数 -->
<router-link :to="'/user/'+userid"></router-link>
<!-- 在 query 中传递参数 -->
<router-link :to="{path: '/profile', query: {name: 'why', age: 18, height: 1.88}}">
// 在路径中传递参数
this.$router.push('/user/' + this.userId)
// 在 query 中传递参数
this.$router.push({
path: '/profile',
query: {
name: 'why',
age: 19,
height: 1.87
}
})
- 在组件中接收路由参数
// 路由定义
const routes = [
{
path: '/user/:id', // 这里的 id 就是参数名称
component: User,
meta: {
title: '用户'
},
},
{
path: '/profile',
component: Profile,
meta: {
title: '档案'
},
}
]
<!-- 取用路由参数 -->
<h2>{{$route.params.id}}</h2>
<h2>{{$route.query.name}}</h2>
// 取用路由参数
this.$route.params.id
this.$route.query.name