VueRouter
VueRouter
特点：通过路由和组件实现一个单页面的应用。
路由的注册：静态路由
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<title>Title</title>
</head>
<body>
<div id="app">
<router-link to="/">首页</router-link>
<router-link to="/course">课程</router-link>
<router-view></router-view>
</div>
<script>
// 定义路由匹配规则
let url = [
{
path:"/",
component:{
template:'<div><h1>首页组件</h1></div>'
}
},
{
path:"/course",
component:{
template:'<div><h1>课程组件</h1></div>'
}
}
];
// 实例化VueRouter对象
let router = new VueRouter({
routes:url
});
// 把VueRouter的实例化对象注册到Vue的跟实例
const app = new Vue({
el:"#app",
router:router
})
</script>
</body>
</html>
路由的注册：动态路由（路由的参数）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<title>Title</title>
</head>
<body>
<div id="app">
<!-- 路由动态绑定：to -->
<router-link :to="{name:'home'}">首页</router-link>
<router-link :to="{name:'course'}">课程</router-link>
<!-- 带有参数的静态路由绑定 -->
<router-link to="/user/nepenthe?age=20">用户1</router-link>
<!-- 带有参数的动态路由绑定 -->
<router-link :to="{name:'user',params:{name:'forget-me-not'},query:{age:'23'}}">用户2</router-link>
<router-view></router-view>
</div>
<script>
// 定义路由匹配规则
let url = [
{
path:"/",
name:"home",
component:{
template:'<div><h1>首页组件</h1></div>'
}
},
{
path:"/course",
name: "course",
component:{
template:'<div><h1>课程组件</h1></div>'
}
},
{
path:"/user/:name",
// 参数设置（？P<name>.*）
name: "user",
component:{
template:'' +
'<div>' +
// 获取路由name：this.$route.name
'<h1>{{this.$route.name}}用户组件</h1>' +
// 获取路由中参数：this.$route.params.name
'<h1>username:{{this.$route.params.name}}</h1>' +
// 获取路由中参数（使用？的参数）：this.$route.query.age
'<h1>age:{{this.$route.query.age}}</h1>' +
'</div>',
// Vue属性加载完成后执行的方法
mounted(){
console.log(this.$route)
}
}
}
];
// 实例化VueRouter对象
let router = new VueRouter({
routes:url
});
// 把VueRouter的实例化对象注册到Vue的跟实例
const app = new Vue({
el:"#app",
router:router
})
</script>
</body>
</html>
路由的注册：自定义路由
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<title>Title</title>
</head>
<body>
<div id="app">
<!-- 路由绑定：to -->
<router-link to="/">首页</router-link>
<router-link to="/course">课程</router-link>
<router-link to="/login">登录</router-link>
<router-view></router-view>
</div>
<script>
// 定义路由匹配规则
let url = [
{
path:"/",
component:{
template:'' +
'<div>' +
'<h1>首页组件</h1>' +
'<button @click="my_click">点击跳转登录页面</button>' +
'</div>',
methods:{
my_click: function(){
console.log(this.$route);
// $route 当前路由的所有信息
console.log(this.$router);
// $router VueRouter的实例化对象
console.log(this.$el);
console.log(this.$data);
this.$router.push("/login")
// 跳转页面 --> 跳转到登录组件
}
}
}
},
{
path:"/course",
component:{
template:'<div><h1>课程组件</h1></div>'
}
},
{
path:"/login",
component:{
template:'' +
'<div>' +
'<h1>登录组件</h1>' +
'</div>'
}
}
];
// 实例化VueRouter对象
let router = new VueRouter({
routes:url
});
// 把VueRouter的实例化对象注册到Vue的跟实例
const app = new Vue({
el:"#app",
router:router
})
</script>
</body>
</html>
路由的钩子函数：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<title>Title</title>
</head>
<body>
<div id="app">
<!-- 路由绑定：to -->
<router-link to="/">首页</router-link>
<router-link to="/course">课程</router-link>
<router-link to="/user">用户</router-link>
<router-link to="/login">登录</router-link>
<router-view></router-view>
</div>
<script>
// 定义路由匹配规则
let url = [
{
path:"/",
component:{
template:'' +
'<div>' +
'<h1>首页组件</h1>' +
'<button @click="my_click">点击跳转登录页面</button>' +
'</div>',
methods:{
my_click: function(){
console.log(this.$route);
// $route 当前路由的所有信息
console.log(this.$router);
// $router VueRouter的实例化对象
console.log(this.$el);
console.log(this.$data);
// 跳转页面 --> 跳转到登录组件
this.$router.push("/login")
}
}
}
},
{
path:"/course",
component:{
template:'<div><h1>课程组件</h1></div>'
}
},
{
path:"/login",
component:{
template:'' +
'<div>' +
'<h1>登录组件</h1>' +
'</div>'
}
},
{
path:"/user",
meta:{
required_login: true
},
component:{
template:'' +
'<div>' +
'<h1>用户组件</h1>' +
'</div>'
}
}
];
// 实例化VueRouter对象
let router = new VueRouter({
routes:url,
mode:'history' // 清除路径
});
router.beforeEach(function (to, from, next) {
console.log(to); // 跳转到哪里
console.log(from); // 从哪来
console.log(next); // 下一步做什么
// 直接路径判断
// if(to.path == "/user"){
// next("/login");
// }
// 使用meta判断（配置方便）
if(to.meta.required_login){
next("login");
}
next();
});
// router.afterEarch(function(to, from){
// 智能识别路由要去哪和从哪来，一般用于获取路由从哪来
// });
// 把VueRouter的实例化对象注册到Vue的跟实例
const app = new Vue({
el:"#app",
router:router
})
</script>
</body>
</html>
子路由的注册：静态路由
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<title>Title</title>
</head>
<body>
<div id="app">
<!-- 路由绑定：to -->
<router-link to="/">首页</router-link>
<router-link to="/course">课程</router-link>
<router-link to="/course/detail">课程详情</router-link>
<router-view></router-view>
</div>
<script>
// 定义路由匹配规则
let url = [
{
path:"/",
component:{
template:'' +
'<div>' +
'<h1>首页组件</h1>' +
'</div>'
}
},
{
path:"/course",
component:{
template:'' +
'<div>' +
'<h1>课程组件</h1>' +
'</div>'
}
},
{
path:"/course/detail",
component:{
template:'' +
'<div>' +
'<h1>课程详情组件</h1>' +
'<hr>' +
'<router-link to="/course/brief">课程概述</router-link> ' +
' <router-link to="/course/chapter">课程章节</router-link>' +
'<router-view></router-view>' +
'</div>'
},
children:[
{
path:"/course/brief",
component:{
template:'' +
'<div>' +
'<h1>课程概述组件</h1>' +
'</div>'
}
},{
path:"/course/chapter",
component:{
template:'' +
'<div>' +
'<h1>课程章节组件</h1>' +
'</div>'
}
},
]
}
];
// 实例化VueRouter对象
let router = new VueRouter({
routes:url
});
// 把VueRouter的实例化对象注册到Vue的跟实例
const app = new Vue({
el:"#app",
router:router
})
</script>
</body>
</html>
子路由的注册：动态路由
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<title>Title</title>
</head>
<body>
<div id="app">
<!-- 路由绑定：to -->
<router-link to="/">首页</router-link>
<router-link to="/course">课程</router-link>
<router-link to="/course/detail">课程详情</router-link>
<router-view></router-view>
</div>
<script>
// 定义路由匹配规则
let url = [
{
path:"/",
component:{
template:'' +
'<div>' +
'<h1>首页组件</h1>' +
'</div>'
}
},
{
path:"/course",
component:{
template:'' +
'<div>' +
'<h1>课程组件</h1>' +
'</div>'
}
},
{
path:"/course/detail",
redirect:{name:'brief'}, // 重定向子路由，实现默认页面显示
component:{
template:'' +
'<div>' +
'<h1>课程详情组件</h1>' +
'<hr>' +
'<router-link :to="{name:\'brief\'}">课程概述</router-link> ' +
'<router-link to="/course/chapter">课程章节</router-link>' +
'<router-view></router-view>' +
'</div>'
},
children:[
{
path:"brief",
name:"brief",
component:{
template:'' +
'<div>' +
'<h1>课程概述组件</h1>' +
'</div>'
}
},{
path:"/course/chapter",
name:"chapter",
component:{
template:'' +
'<div>' +
'<h1>课程章节组件</h1>' +
'</div>'
}
},
]
}
];
// 实例化VueRouter对象
let router = new VueRouter({
routes:url
});
// 把VueRouter的实例化对象注册到Vue的跟实例
const app = new Vue({
el:"#app",
router:router
})
</script>
</body>
</html>
命名的路由视图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<title>Title</title>
</head>
<body>
<div id="app">
<!-- 路由绑定：to -->
<router-link to="/">首页</router-link>
<router-link to="/course">课程</router-link>
<router-link to="/user">用户</router-link>
<router-view name="head"></router-view>
<router-view name="footer"></router-view>
<router-view></router-view>
</div>
<script>
// 定义路由匹配规则
let url = [
{
path:"/",
component:{
template:'' +
'<div>' +
'<h1>首页组件</h1>' +
'</div>',
}
},
{
path:"/course",
component:{
template:'<div><h1>课程组件</h1></div>'
}
},
{
path:"/user",
components:{
head:{
template:'' +
'<div>' +
'<h1>用户head</h1>' +
'</div>'
},
footer:{
template:'' +
'<div>' +
'<h1>用户footer</h1>' +
'</div>'
}
}
}
];
// 实例化VueRouter对象
let router = new VueRouter({
routes:url,
mode:'history' // 清除路径
});
router.beforeEach(function (to, from, next) {
next();
});
// 把VueRouter的实例化对象注册到Vue的跟实例
const app = new Vue({
el:"#app",
router:router
})
</script>
</body>
</html>
Vue的路由：
注册：
-- 定义一个匹配规则对象
let url = [
{
path:"/",
component:{}
}
]
-- 实例化VueRouter对象 并把匹配规则注册进去
let router = new VueRouter({
routes:url
})
-- 把VueRouter实例化对象注册到Vue的根实例
const app = new Vue({
el:""
})
-- router-link
-- router-view
子路由的注册
-- 在父路由里注册children：[{},{}]
-- 在父路由对应的组件里的template里写 router-link router-view
路由的名命
-- name
-- 注意 to 一定动态绑定 ：to=" {name:' '} "
路由的参数
this.$route.params.xxxx
this.$route.query.xxxx
自定义路由
this.$router.push("/course")
this.$router.push({name:' ', params:{ },query:{}})
路由的钩子函数
router.beforeEach(function(to, from, next){
to 路由去哪
from 路由从哪来
next 路由接下来要做什么
}) # 一般用于拦截
router.afterEach(function(to, from){
}) # 一般用于获取
注意
$route 路由的所有信息组成的对象
$router VueRouter 实例化对象
redirect 路由的重定向
