安装
<script src="/path/to/vue.js"></script>
<script src="/path/to/vue-router.js"></script>
npm
npm install vue-router
使用
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
简单使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>简单使用</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<router-link to="/home">去家里</router-link>
<router-link to="/school">去学校</router-link>
<router-view></router-view>
</div>
</body>
<script>
const Home = {
template: '<div>在家里</div>'
}
const School = {
template: '<div>在学校</div>'
}
const routes = [{
path: '/home',
component: Home
},
{
path: '/school',
component: School
}
]
const router = new VueRouter({
routes
})
new Vue({
router,
el: "#app",
})
</script>
</html>
动态路由匹配
这里官方文档需要明白的几个问题:
1 路由能够进行动态控制
2 路由能够有js进行逻辑跳转
3 路由能够进行高级匹配
下面编了一个例子来说明
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>简单使用</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<router-link to="/telescreen/1">一号流水线工人</router-link>
<router-link to="/telescreen/2">二号流水线工人</router-link>
<router-link to="/others">其他部门</router-link>
<router-view></router-view>
</div>
</body>
<script>
/**
* 需要解决的问题:
* 1 创建一个'手机屏幕'组件,作为基础组件,给一号流水线工人和二号流水线工人使用
* 2 在他们把手机屏幕组装之前,需要安装各自的序列号
* 3 其他流水线的工人不作业
*/
const teleScreen={
template: '<div>手机屏幕</div>',
beforeMount() {
var x=this.$route.params;
console.log(x)
}
}
const others={
template: '<div>其他流水线的工人不工作</div>',
mounted() {
this.$router.push("/telescreen/1");
},
}
const routes = [
{
path: '/telescreen/:id',
component: teleScreen
},
{path:'*',component:others}
]
const router = new VueRouter({
routes
})
new Vue({
router,
el: "#app",
})
</script>
</html>
嵌套路由
根据官方文档,需要弄清楚以下几点:
1 嵌套路由,说白了,就是在组件里套组件
2 "/"表示根路径
下面编写了一个教室和学生A的例子:在教室组件中,想办法渲染出来学生A
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>简单使用</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<router-link to="/classroom">教室</router-link>
<p>下面是渲染的出口</p>
<router-view></router-view>
</div>
</body>
<script>
const classroom={
template: `
<div>我是教室
<router-view></router-view>
</div>`,
}
const student_a={
template: '<div>student_a</div>',
}
const routes = [
{
path: '/classroom',
component: classroom,
children:[
{
path: 'student_a',
component: student_a,
}
]
},
]
const router = new VueRouter({
routes
})
new Vue({
router,
el: "#app",
})
</script>
</html>
编程式导航
根据官方文档,该块内容主要弄清楚以下几点:
1 除了这种声明式的导航外,我们也能用js逻辑代码控制
2 熟练掌握router.push的用法
3 了解router.replace和router.go的用法
4 了解History模式
针对以上知识点,编写了个小例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>简单使用</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<button @click="go_a">go A</button>
<button @click="go_b">go B</button>
<router-view></router-view>
</div>
</body>
<script>
const A={
template: ` <div>A</div>`,
}
const B={
template: ` <div>B</div>`,
}
const routes = [
{
path: '/A',
name:'isA',
component: A,
},
{
path: '/B',
component: B,
},
]
const router = new VueRouter({
routes
})
new Vue({
router,
el: "#app",
methods: {
go_a:function(){
// this.$router.push('A');
// this.$router.push({path:'/A'})
this.$router.push({name:'isA'},function(){
console.log("完成了跳转")
})
},
go_b:function(){
this.$router.push({path:'/B'})
}
},
})
</script>
</html>
命名路由
根据官方文档,命名路由就是用name把该路由给个名称,以便标识
命名视图
根据官方文档:我们在进行路由的时候,一般一个url对应一个组件,但是呢,该组件也许会分为几个部分,需要不同展示,这个时候就需要用到命名视图了
举了个小例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>简单使用</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<router-view ></router-view>
<router-view name="a"></router-view>
<router-view name="b"></router-view>
</div>
</body>
<script>
let school={
template:`<div>学校</div>`
};
let studenta={
template:`<div>学生A</div>`
};
let studentb={
template:`<div>学生B</div>`
}
const routes = [
{
path: '/',
components: {
default:school,
a:studenta,
b:studentb
},
},
]
const router = new VueRouter({
routes
})
new Vue({
router,
el: "#app",
})
</script>
</html>
重定向和别名
根据官方文档,就是用来把路由起个别名和重新定位到不同url的作用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>简单使用</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<router-view ></router-view>
</div>
</body>
<script>
let school={
template:`<div>学校</div>`
};
let studenta={
template:`<div>学生A</div>`
};
let studentb={
template:`<div>学生B</div>`
}
const routes = [
{
path: '/school',
component :school
},
// {
// path: '/a',
// component :studenta,
// // redirect: '/b'
// },
{
path: '/b',
component :studentb,
alias: '/aaaas'
},
]
const router = new VueRouter({
routes
})
new Vue({
router,
el: "#app",
})
</script>
</html>
路由组件的传参
根据官方文档解释,需要弄清楚以下几点:
1 如果不用props,是可以用this.$route.params实现参数获取的
2 用props可以进行解耦
3 props的具体用法
举了个小例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>简单使用</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<router-view ></router-view>
</div>
</body>
<script>
let User={
// template:`<div>User {{ $route.params.id }}</div>`,
template:`<div>User {{ id }}</div>`,
props:['id']
};
const routes = [
{
path: '/user/:id',
component :User,
props: true
},
]
const router = new VueRouter({
routes
})
new Vue({
router,
el: "#app",
})
</script>
</html>
路由守卫
根据官方文档解释,守卫其实就是路由的生命周期:
换句大白话,就是你在路由的时候,可以让你在路由前,路由后进行逻辑操作,操作顺序如下:
1 导航被触发。
2 在失活的组件里调用离开守卫。
3 调用全局的 beforeEach 守卫。
4 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
5 在路由配置里调用 beforeEnter。
6 解析异步路由组件。
7 在被激活的组件里调用 beforeRouteEnter。
8 调用全局的 beforeResolve 守卫 (2.5+)。
9 导航被确认。
10 调用全局的 afterEach 钩子。
11 触发 DOM 更新。
12 用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。
具体例子如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>简单使用</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<button @click="goschool">进入教室</button>
<router-view ></router-view>
</div>
</body>
<script>
let school={
template:`<div>进入了教室</div>`,
};
const routes = [
{ path: '/school', component :school,beforeEnter: (to, from, next) => {
console.log("独享守卫");
next();
}},
]
const router = new VueRouter({
routes
})
router.beforeEach((to, from, next) => {
// console.log(to);
// console.log(from);
// console.log(next);
console.log("前置守卫")
next();
})
router.beforeResolve((to, from, next) => {
console.log("解析守卫")
next();
})
router.afterEach((to, from) => {
console.log("后置守卫")
})
new Vue({
router,
el: "#app",
methods: {
goschool:function(){
this.$router.push("school")
}
},
})
</script>
</html>
路由元信息
根据官方文档显示,我们需要弄清楚meta字段的玩法.
例子如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>简单使用</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<button @click="goschool">进入教室</button>
<router-view ></router-view>
</div>
</body>
<script>
let school={
template:`<div>进入了教室</div>`,
};
const routes = [
{ path: '/school', component :school,meta:{ classname: "一年级一班" },beforeEnter: (to, from, next) => {
console.log("独享守卫");
console.log(to.matched);
to.matched.some(function(item){
console.log(item.meta)
})
next();
}},
]
const router = new VueRouter({
routes
})
new Vue({
router,
el: "#app",
methods: {
goschool:function(){
this.$router.push("school")
}
},
})
</script>
</html>
过度动效
根据官方文档,就是做一些动画效果的,很简单.
数据获取
根据官方文档,获取数据分为两种
- 导航完成之后获取
- 导航完成之前获取
记得做好用户体验
滚动行为
根据官方文档解释,滚动行为其实就是锚点到对应的组件,让用户有更好的体验
例子如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>简单使用</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<button @click="goschool">进入教室</button>
<transition name="slide-fade">
<router-view></router-view>
</transition>
</div>
</body>
<script>
let school={
template:`<div style='width:2000px;height:1000px;border:solid 1px red'>进入了教室</div>`,
};
const routes = [
{ path: '/school', component :school,meta:{ classname: "一年级一班" },beforeEnter: (to, from, next) => {
console.log("独享守卫");
console.log(to.matched);
to.matched.some(function(item){
console.log(item.meta)
})
next();
}},
]
const router = new VueRouter({
routes,
scrollBehavior (to, from, savedPosition) {
// return 期望滚动到哪个的位置
console.log(savedPosition);
return { x: 1000, y: 0 }
}
})
new Vue({
router,
el: "#app",
methods: {
goschool:function(){
this.$router.push("school")
}
},
})
</script>
</html>
路由懒加载
这块内容比较重要个人感觉
路由懒加载,说白了,就是你写了很多的.vue组件,大型项目可能会有成千上万个,那么在初始化的时候,如果都加载出来,肯定会影响效率,那么,vue就提出了一个概念,就是点击的时候,也就是在使用的时候,在加载这个模块,具体的见下面的代码分析,需要搭建vue-cli
搭建完后,自己创建个router.js剥离出router;如果不剥离,放在main.js里面一样的;
然后,你用import index from …进行导入的时候,你发现,及时你没有用到notfound.vue模块,依然加载了,但是你用const index= () =>…进行导入的时候,不用notfound.vue模块就不会加载出来呀