Vue第四篇 Vue路由系统
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 实例化对象
Vue第四篇 Vue路由系统的更多相关文章
- WebApi学习总结系列第四篇（路由系统）
由于工作的原因,断断续续终于看完了<ASP.NET Web API 2 框架揭秘>第二章关于WebApi的路由系统的知识. 路由系统是请求消息进入Asp.net WebApi的第一道屏障, ...
- VueRouter爬坑第四篇-命名路由、编程式导航
VueRouter系列的文章示例编写时,项目是使用vue-cli脚手架搭建. 项目搭建的步骤和项目目录专门写了一篇文章:点击这里进行传送 后续VueRouter系列的文章的示例编写均基于该项目环境. ...
- python 终极篇 --- django 路由系统
URL配置 基本格式: from django.conf.urls import url urlpattern ...
- django基础篇02-url路由系统
django的路由系统: 一.基本用法: 1.path('index', views.index), # 通过类的方式创建url映射 2.path('home', views.Home.as_view ...
- 前端vue系列-起始篇 vue的基本认知
hi,大家伙,我是佛系大大,很高兴与你们一起沟通,学习,进步. 很久不更新博客了,现在回来再写博客,尽然是有些怀念的感觉,幸福的感觉.因为写博客,内心会很宁静,沉浸在自己的世界中,是很幸福的一件事.当 ...
- 第四篇、linux系统文件属性三
一.linux文件属性之文件权限体系介绍 二.linux中连接介绍 三.软连接 四.图解 五文件删除原理 主要内容
- Vue路由系统
Vue路由系统 一切分离都是为了更好的结合,本文详细介绍了前后端分离架构之后,前端如何实现路由控制,即Vue路由系统. 一.VueRouter实现原理 VueRouter的实现原理是根据监控锚点值的改 ...
- 【Vue路由系统详述】
目录 路由命名 路由参数 路由参数的实现原理 子路由 子路由之append 动态绑定属性 子路由之append升级版 子路由之非append 路由重定向 手动路由 路由钩子 在路径中去掉"# ...
- 10.3 Vue 路由系统
Vue 路由系统 简单示例 main.js import Vue from 'vue' import App from './App.vue' //https://router.vuejs.or ...
- Vue.js之路由系统
Vue.js生态之vue-router vue-router是什么? vue-router是Vue的路由系统,定位资源的,我们可以不进行整页刷新去切换页面内容. vue-router的安装与基本配置 ...
随机推荐
- LeetCode:不用加号的加法（位运算）
解题思路:位运算,只能用位运算符.a.b同号比较好处理.主要是异号的情况,考虑 a>0,b<0,因为 a,b的绝对值都不会超过2^32,因此取模数为2^32.根据同余方程可知 (a+b)% ...
- 华企盾DSC导致金蝶导入Excel导入不了的问题
需要把Excel的OLE控制关掉,并且金蝶的进程和Excel的进程高级设置要么都启用重定向,要么都不启用重定向
- 聊聊流式数据湖Paimon(五)
从Demo入手,了解Paimon/Flink项目搭建的全过程.记录下采坑之旅. 创建Flink项目 在IDEA中创建Flink项目,由于没有Flink的archetype,因此需要手动创建一下. 参考 ...
- ElasticSearch之cat indices API
命令样例如下: curl -X GET "https://localhost:9200/_cat/indices?v=true&pretty" --cacert $ES_H ...
- 原生JavaScript 与 jQuery 执行Ajax请求
原生JavaScript和jQuery都可以用来执行Ajax请求,以下是它们的基本实现方式的比较: 原生JavaScript实现Ajax请求: var xhr = new XMLHttpRequest ...
- MySQL进阶篇：详解索引使用_最左前缀法则
MySQL进阶篇:第四章_四.一_ 索引使用_最左前缀法则 最左前缀法则 如果索引了多列(联合索引),要遵守最左前缀法则.最左前缀法则指的是查询从索引的最左列开始,并且不跳过索引中的列.如果跳跃某一列 ...
- 数仓性能调优：row_number() over(p)-rn=1性能瓶颈发现和改写套路
本文分享自华为云社区<GaussDB(DWS)性能调优:row_number() over(p)-rn=1性能瓶颈发现和改写套路>,作者:Zawami . 1.改写场景 本套路应用于子查询 ...
- 云小课｜RDS for MySQL参数模板一键导入导出，参数配置轻松搞定
摘要:云数据库RDS for MySQL支持参数模板的导入和导出功能. 本文分享自华为云社区<[云小课][第56课]RDS for MySQL参数模板一键导入导出,参数配置轻松搞定>,作者 ...
- 这是你没见过的MindSpore 2.0.0 for Windows GPU版
摘要:一文带你看看MindSpore 2.0.0 for Windows GPU版. 本文分享自华为云社区<MindSpore 2.0.0 for Windows GPU泄漏版尝鲜>,作者 ...
- 想快速重构智慧园区5A系统，这份方案推荐给你
摘要:近年来,园区的数字化一直在演进,从OA.CA.BA.SA.FA等单一系统的信息化建设,到以应用为主导的大系统集成,再到以云.大数据为基础的数据开放平台构建,继而进入全量数据融合.数字技术泛在的智 ...