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的安装与基本配置 ...
随机推荐
- 教你使用Prometheus-Operator进行K8s集群监控
本文分享自华为云社区<Promethues-operator入门使用指导>,作者:可以交个朋友. 一. 背景 在非operator配置的普罗中我们监控k8s集群都是通过配置configma ...
- zookeeper JavaApi 删除节点
/* * 删除节点 * 1.删除单个节点 * 2.删除带有子节点的节点 * 3.必须成功的删除 * 4.回调 * * */ @Test public void delete1() throws Exc ...
- [python]数据分析--数据清洗处理case1
数据预处理案例1 主要涉及pandas读取csv文件,缺失值和重复值处理,分组计数,字段类型转换 ,结果写入到Excel. 根据要求对CSV数据集进行处理要求如下: 保留数据关键信息:time.lat ...
- SpringBoot使用maven打jar包配置
在pom.xml文件中加入依赖 <parent> <groupId>org.springframework.boot</groupId> <artifactI ...
- 华企盾DSC启动服务器提示“发生系统错误5”
解决方法:没有管理员权限 导致,需要以管理员权限运行服务器安装包,覆盖安装一下
- 【C#】【DateTime】获取当前时间的前一天或者后一天方法学习
假期懈怠了一阵子,因为工作环境没有网络,随即记录下当时的问题: 1.关于DateTime.Now(2023/10/07)的前一天的时间(2023/10/06),想要通过ToString转换成字符串后除 ...
- STM32CubeMX教程7 TIM 通用定时器 - 输入捕获
1.准备材料 开发板(STM32F407G-DISC1) ST-LINK/V2驱动 STM32CubeMX软件(Version 6.10.0) keil µVision5 IDE(MDK-Arm) X ...
- 关于helloworld
我们的helloworld是从一个源程序开始的,该源程序由程序员通过编译器创建并保存的文件,文件名就是hello.c.这个hello.c的源程序,实际上是有0和1组成的序列.每一个0和1都成为一位,这 ...
- websocket实现实时直播
websocket实现实时直播 这篇文章我首发于简书,拿到这里发表不过分吧?点个赞再走呗! 作为一名web开发者,我使用websocket实现实时直播(滑鸡版). 为什么是滑鸡版呢?因为他上不了生产, ...
- Git commit emoji 对照表
emoji emoji代码 commit说明 (调色板) :art: 改进代码结构/代码格式 ️ (闪电) :zap: 提升性能 (赛马) :racehorse: 提升性能 (火焰) :fire: 移 ...