01-路由注册
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<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>
</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>
02-路由的命名参数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<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>
</head>
<body>
<div id="app">
<router-link :to="{name: 'home'}">首页</router-link>
<router-link :to="{name: 'course'}">免费课程</router-link>
<!--<router-link to="/user/xiayuhao?age=38">用户</router-link>-->
<router-link :to="{name: 'user', params: {name: 'xiayuhao'}, query: {age: 38}}">用户</router-link>
<router-view></router-view>
</div>
<script>
// 定义路由和组件匹配规则
let url = [
{
path: "/xiayuhao",
name: "home",
component: {
template: `<div><h1>这是首页组件</h1></div>`
}
},
{
path: "/course",
name: "course",
component: {
template: `<div><h1>这是课程组件</h1></div>`
}
},
{
path: "/user/:name",
// /user/xiayuhao
// name=xiayuhao
// (?P<name>.*)
name: "user",
component: {
template: `<div>
<h1>这是{{this.$route.params.name}}年龄是{{this.$route.query.age}}用户组件</h1>
</div>`,
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>
03-手动路由
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<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>
</head>
<body>
<div id="app">
<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)
console.log(this.$router)
console.log(this.$el)
console.log(this.$data)
// $route 路由的所有信息
// $router VueRouter实例化对象
this.$router.push("/login")
}
}
}
},
{
path: "/course",
component: {
template: `<div><h1>这是课程组件</h1></div>`
}
},
{
path: "/login",
name: '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>
04-路由的钩子函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
<script src="vue-router.js"></script>
</head>
<body>
<div id="app">
<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)
console.log(this.$router)
console.log(this.$el)
console.log(this.$data)
// $route 路由的所有信息
// $router VueRouter实例化对象
this.$router.push("/login")
}
}
}
},
{
path: "/course",
component: {
template: `<div><h1>这是课程组件</h1></div>`
}
},
{
path: "/login",
name: 'login',
component: {
template: `<div><h1>这是登录组件</h1></div>`
}
},
{
path: "/user",
meta: {
required_login: true
},
name: 'user',
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")
// }
if(to.meta.required_login){
next("login")
}
next()
})
router.afterEach(function (to, from) {
// 只用于获取你从哪里来的路由信息
})
// 把VueRouter的实例化对象注册到Vue的根实例里
const app = new Vue({
el: "#app",
router: router
})
</script>
</body>
</html>
05-子路由的注册
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<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>
</head>
<body>
<div id="app">
<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: "/course/brief",
path: "brief",
name: "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>
06-命名的路由视图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
<script src="vue-router.js"></script>
<style>
.myfooter {
position: fixed;
bottom: 0;
}
</style>
</head>
<body>
<div id="app">
<router-link to="/">首页</router-link>
<router-link to="/course">免费课程</router-link>
<router-link to="/user">用户</router-link>
<router-view name="head" class="myheader"></router-view>
<router-view name="footer" class="myfooter"></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>这是用户的头部</h1></div>`
},
footer: {
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>
总结：
Vue的路由
注册
-- 定义一个匹配规则对象
let url = [
{
path: "/",
component: {
}
}
]
-- 实例化VueRouter对象 并把匹配规则注册进去
let router = new VueRouter({
routes: url
})
-- 把VueRouter实例化对象注册Vue的根实例
const app = new Vue({
el: "#app",
router: router
})
-- 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 实例化对象