vue-router中文文档 : 路由 — Vue.js (vuejs.org)
1. 下载vue-router
// 下载依赖包包
npm i vue-router
2. 引入&全局注册 @/router/index.js
// 引入vue
import Vue from 'vue'
// 引入vue-router
import VueRouter from 'vue-router'
// 注册到vue全局
Vue.use(VueRouter)"
3. 创建一个vue文件 @/views/demo
4. 配置路由 @/router/index.js
// 定义路由规则
const routes = [
{
path: '/demo', // 定义访问组件的路径
component: demo // 注册组件(可以使用懒加载)
}
]
5. 利用路由规则生产路由对象 @/router/index.js
const router = new VueRouter({
routes: routes // 注意：属性名routes不能修改，因为这是路由对象提供的
})
6. 导出路由对象 @/router/index.js
export default router
7. 把路由对象注入到vue实例里面 /main.js
import router from './router'
...
new Vue({
router,
...
}).$mount('#app')
8. 设置路由挂载点(一级路由) /App.vue
*router文件&稍微不一样的写法 @/router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
// 注册到vue全局
Vue.use(VueRouter)
// 路由规则 静态路由
const constentRoutes = [
{
path: '/demo',
name: 'demo',
component: () => import('@/views/demo') //路由懒加载的写法
},
{
// 进入网站时的页面
path: '/',
name: 'index',
component: () => import('@/layout')
},
{
path: '/404',
name: '404',
component: () => import('@/views/404.vue')
},
{
// 路由重定向 在前面的路由都匹配不到的情况下 跳转到指定的页面
path: '*',
redirect: ('/404')
}
]
// 引入动态路由
import login from './modules/login.js'
import about from './modules/about.js'
// 合并动态路由
const asyncRouter =[
login,
about
]
// 利用路由规则生产路由对象
const router = new VueRouter({
// 结合静态路由和动态路由, 属性名routes不能修改，因为这是路由对象提供的
routes:[...constentRoutes,...asyncRouter]
})
export default router
拓展
(1) 路由懒加载
应用场景:
整个网页默认是刚打开就去加载所有页面，路由懒加载就是只加载你当前点击的那个模块。
作用&优点:
按需去加载路由对应的资源，提高首屏加载速度
（tip:首页不用设置懒加载，而且一个页面加载过后再次访问不会重复加载）。
实现原理：
将路由相关的组件，不再直接导入了，而是改写成异步组件的写法，
只有当函数被调用的时候，才去加载对应的组件内容。
(2) 路由重定向
路由重定向表示将你原来在转发列表中发向一台路由的路径改成另外一条路径，
也就相当于让你的数据走另外一条路到服务器。
好处：当一个路由出现问题的时候，会自动重定向到另外一个路由上去，保证你的数据畅通。
坏处：可能会出现一定的延时，造成变慢。但是一切都是由路由器的[路由表]自动控制的。
应用: 路径错误时重定向到 404页面
(3) 二级路由
一级路由的chilren属性
语法和一级路由一样
注意path的写法:
path: 'son'
不能是 path: '/son'
要么就写完整 path: '/父路由/son'
在父路由对应的路径设置路由挂载点 <router-vue />
