Vue 路由系统和钩子函数
2018-12-05 17:00
323 查看
title: 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
<!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="xxy">
<router-link to="/">首页</router-link>
<router-link to="/course">课程</router-link>
<router-view></router-view>
</div>
<script>
//定义路由和组件的匹配规则
let url = [
{
path: "/",
component:{
template:`<div><h1>THIS IS 首页</h1></div>`
}
},
{
path:'/course',
component:{
template:`<div><h1>这是课程组件</h1></div>`
}
},
];
//实例化vuerouter对象
let router = new VueRouter({
routes: url
});
//把VueRouter的实例化对象注册到Vue的根实例里
const xxy = new Vue({
el:"#xxy",
router: router
})
</script>
</body>
</html>
其中 routes 必须是这个参数 不然其它的不显示
路由参数
<!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="xxy">
<router-link :to="{name: 'home'}">首页</router-link>
<router-link :to="{name: 'course'}">课程</router-link>
<router-link :to="{name: 'user', params: {name: 'xiaozhi'},query: {age: 38}}">用户</router-link>
<router-view></router-view>
</div>
<script>
//定义路由和组件的匹配
let url = [
{
path: "/niubi",
name: "home",
component:{
template:`<div><h1>这是首页</h1></div>`
}
},
{
path:"/course",
name:"course",
component:{
template: `<div><h1>这是课程组件</h1></div>`
}
},
{
path: "/user/:name",
name: "user",
component:{
template:`<div>
<h1>用户{{this.$route.params.name}}年龄是{{this.$route.query.age}}</h1>
</div>`,
mounted(){
console.log(this.$route)
}
}
},
];
let router = new VueRouter({
routes: url
});
const xxy = new Vue({
el:"#xxy",
router: router
})
</script>
</body>
</html>
特别注意：path: '/user/:name' 别忘了反斜杠 / 路由的参数 console.log($route)可以打印出全部参数 路由的参数 this.$route.params.xxxx this.$route.query.xxxx
手动路由
通过点击按钮实现跳转
<!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="xxy">
<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',
component: {
template: `<div><h1>这是登录组件</h1></div>`
}
},
];
let router = new VueRouter({
routes: url
});
const xxy = new Vue({
el:"#xxy",
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="xxy">
<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',
component: {
template: `<div><h1>这是登录组件</h1></div>`
}
},
{
path: '/user',
meta:{
required_login: true
},
component: {
template: `<div><h1>这是用户组件</h1></div>`
}
},
];
let router = new VueRouter({
routes: url,
mode: 'history'
});
router.beforeEach(function (to, form, next) {
//接受三个参数 to 去哪里 form 来自哪里 next 下一步去干吗
//必须要写next
if(to.meta.required_login){
next("login")
}
next()
});
const xxy = new Vue({
el:"#xxy",
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>
</head>
<body>
<div id="xxy">
<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'},//默认电视brief页面 重定向
component: {
template: `<div><h1>这是课程详情组件</h1>
<hr>
<router-link :to="{name: 'brief'}">课程概述</router-link>
<router-link :to="{name: 'chapter'}">课程章节</router-link>
<router-view></router-view>
</div>`
},
children:[
{
path: "brief",
name: "brief",
component: {
template: `<div><h1>这是课程概述组件</h1></div>`
},
},
{
path: "/course/detail/chapter",
name: "chapter",
component: {
template: `<div><h1>这是课程章节组件</h1></div>`
},
},
]
},
];
// 实例化VueRouter对象
let router = new VueRouter({
routes: url
});
// 把VueRouter的实例化对象注册到Vue的根实例里
const app = new Vue({
el: "#xxy",
router: router
})
</script>
</body>
</html>
子路由与父路由用 children联系
命名的路由视图
<router-view name="head" class="myheader"></router-view>
<router-view name="footer" class="myfooter"></router-view>
components: {
head: {
template: `<div><h1>这是用户的头部</h1></div>`
},
footer: {
template: `<div><h1>这是用户的底部</h1></div>`
}
钩子函数
<!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>
</head>
<body>
<div id="app">
{{name}}
</div>
<script>
const app = new Vue({
el: "#app",
data: {
name: "小智"
},
methods: {
init: function () {
console.log(123)
}
},
beforeCreate(){
console.group("BeforeCreate");
console.log(this.$el);
console.log(this.name);
console.log(this.init);
},
created(){
console.group("Create");
console.log(this.$el);
console.log(this.name);
console.log(this.init);
},
beforeMount(){
console.group("BeforeMount");
console.log(this.$el);
console.log(this.name);
console.log(this.init);
},
mounted(){
console.group("mounted");
console.log(this.$el);
console.log(this.name);
console.log(this.init);
},
beforeUpdate(){
console.group("BeforeUpdate");
console.log(this.$el);
console.log(this.name);
console.log(this.init);
},
updated(){
console.group("updated");
console.log(this.$el);
console.log(this.name);
console.log(this.init);
},
beforeDestroy(){
console.group("BeforeDestroy");
console.log(this.$el);
console.log(this.name);
console.log(this.init);
},
destroyed(){
console.group("Destroy");
console.log(this.$el);
console.log(this.name);
console.log(this.init);
}
})
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- vue组件级路由钩子函数介绍，及实际应用
- VUE-cli全局变量，路由跳转引起计算属性函数的执行
- 基于Vue2.X的路由和钩子函数详解
- vue生命周期的钩子函数学习总结
- Vue生命周期与钩子函数
- Vue利用路由钩子token过期后跳转到登录页的实例
- Backbone路由添加类似vue-router导航钩子
- Vue的路由钩子
- Vue利用路由钩子token过期后跳转到登录页
- vue2.0项目实战（4）生命周期和钩子函数详解
- vue路由钩子
- vue的钩子函数
- [随手记]VUE：keep-alive的两个钩子函数
- 【Vue2.0】vue生命周期中的钩子函数
- vue的过滤器，发送请求，路由，生命周期钩子的简单介绍
- vue中各选项及钩子函数执行顺序
- vue中动画函数钩子js动画
- Vue之Vue-router全局路由钩子
- Vue路由钩子之afterEach beforeEach的区别详解
- vue移动端iso 利用钩子里面的导航守卫beforeRouteLeave实现返回按钮不返回上一次路由，返回到自己指定的路由