- 使用vue.js, 我们可以通过组合组件来组成应用程序，当你要把vue-router添加进来，我们需要做的是将组件components映射到路由routes,然后告诉vue-router在哪里渲染它们
- 导航守卫
- 全局守卫（beforeEach、beforeResolve、afterEach）
- 路由守卫（beforeEnter）
3.组件守卫（beforeRouteEnter、beforeRouteUpdate、、beforeRouteLeave）
- 懒加载
一般webpack会将我们的模块打包成一个js文件，这个文件会随着我们组件模块的增多而体积变大，这时候当我们首屏加载这个js文件的时候，会花费较长的时间，这里懒加载的方式就是把懒加载的模块从这个js文件分离出去，当使用到这个组件的时候在向服务器发送请求，从而减小了一开始请求的js的体积
.babelrc 文件 npm install babel-plugin-syntax-dynamic-import -D
"plugins": [
"syntax-dynamic-import"
]
routes:
{ path: '/login', component: () => import('../pages/login/Login.vue'), alias:'/b'},
{ path: '/home', component: Home,},
{ path: '/*', component: Other},
分模块配置
webpack 的output配置
chunkFilename: '[name].bundle.js',
路由组件的写法
component: () => import( /* webpackChunkName: "login" */ '../pages/login/Login.vue')
// 二级菜单需要添加父组件(Base)，父组件内容需要添加<router-view/> 这里搭配element-ui菜单使用
const Home = () => import( /* webpackChunkName: "home" */ '@pages/home/Home.vue')
const Setting = () => import( /* webpackChunkName: "other" */ '@pages/other/Setting.vue')
import Base from '@component/Base.vue'
const menu_routes = [
{
path: "/home",
name: "home",
label: "首页",
icon: "s-home",
component: Home
},
{
label: "其他",
icon: "location",
path: "/other",
component:Base,
children: [
{
path: "/other",
name: "other",
label: "其他",
icon: "setting",
component: Setting
}
],
},
]
export default {
menu_routes
}
image.png
- 后端路由：当用户输入url地址，把这个地址发送到服务器，服务器解析请求路径，拿到对应页面返回
-
前端路由：当用户输入url,js解析地址，找到对应的地址页面，看到页面
image.png - hash 模式是在访问路径上存在一个#，hash模式相当于先访问index.html文件，然后再通过html文件的hash值（也就是#后面的路径）来匹配对应的组件（锚点原理），进行动态加载。我们之所以在启动项目的时候看不到index.html是因为服务器默认配置当访问localhost:8080/ 项目文件夹目录的时候，相当于访问http://localhost:8080/index.html，假如我们这里写成http://localhost:8080/index.html/#/other,则相当于访问http://localhost:8080/index.html/index.html/#/other,将找不到这个页面
- history 模式的运行原理不是通过html的锚点，他是利用了js history.push重写url路径但不会向后台发送请求来实现将网页的url地址动态改变，当访问localhost:8080/的时候，是相当于localhost:808服务器去加载index.html
- router-view 渲染路径匹配到的视图组件，换句话说它相当于组件的占位符，当匹配到路径对应的组件时，就将这个router-view占位符替换成相应组件，多级菜单则利用了路由嵌套原理
// 1.使用vue.use说明是一个插件。
// 作用：1.执行里面的方法
/* function a(){
console.log("100")
}
Vue.use(a) */
// 2.如果你的方法有一个install属性，并且这个属性是一个方法，则他不会执行方法，而是执行install方法,打印200
/* a.install = function(){
console.log("200")
} */
// 3. install这个方法第一个参数是Vue的狗在函数，是我们可以使用vue相关的api
/* a.install = function(vue){
console.log(vue)
} */
// 1.实现并声明两个全局注册的组件，router-link 和 router-view
// 2.插件需要实现install，做一个额外的一件事就是this.$router.push实现路由跳转
// 3.点击router-link，router-view会切换 通过地址在路由表中找到对应的components,利用vue响应式
// 1.要求必须要有install方法，被vue调用 2.两个组件、
let Vue; // 保存Vue的构造函数，在插件中使用
class VueRouter {
constructor(options) {
this.$options = options
// 需要把this.current 变为响应式的数据
let initial = window.location.hash.slice(1) || "/"
Vue.util.defineReactive(this, "current", initial)
window.addEventListener("hashchange", () => {
// this.current不是响应式的数据
this.current = window.location.hash.slice(1) || "/"
})
}
}
// 在使用vue.use(VueRouter)的时候，是还没有拿到router的实例的，
// 所以这个install方法需要延迟到一个时机到router创建完毕并附加到选项上是才执行
VueRouter.install = (_Vue) => {
Vue = _Vue
// 1.挂载$touter属性 this.$router.push
// 全局混入延迟到一个时机到router创建完毕并附加到选项上是才执行
Vue.minxin({
beforeCreate() {
// 注意此钩子在每个组件创建实例的时候都会调用
// 根实例才有该选项
if (this.$options.router) {
// 每个子组件的实例都是继承根实例Vue的
Vue.prototype.$router = this.$options.router
}
}
})
// 实现两个组件 router-link router-view
Vue.component("router-link", {
props: {
to: {
type: String,
required: true
}
},
render(h) {
return h('a', {
attrs: {
href: `#${this.to}`
}
}, this.$slots.default)
}
})
// 根据当前地址去路由表找到，然后进行组件渲染
Vue.component("router-view", {
render(h) {
let component = null
const current = this.$router.current
const route = this.$router.$options.routes.find(route => route.path === current)
if (route) {
component = route.component
}
return h(component)
}
})
}
export default VueRouter
/* Vue.use(VueRouter)
const vm = new Vue({
el:'#app',
router,
store,
render: (h) => h(App)
}) */
