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的安装与基本配置 ...
随机推荐
- viewPager2页面的切换
使用流程: 1.定义ViewPager 2.为ViewPager创建Adapter ViewPagerAdapter package com.example.viewpagerandfragm ...
- Vue绑定Style和Class写法
vue2写法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
- 正则表达式之grep与sed用法
一.grep和egrep的用法 (一)grep用法 grep是根据给出的条件查找特定的字符.用单引号查找指定的单词,图1.1.grep后面可选项用**-n显示查找的行数:-i不区分大小写查找图1.2 ...
- 计算机网络分层结构--OSI模型、TCP/IP 模型、五层模型
计算机网络分层结构 OSI参考模型与TCP/IP参考模型 五层参考模型
- Typecho 反向代理 http 访问强制启用生成 https 链接
问题描述 微酷是使用Nginx反向代理内网的Typecho站点,为了效率内网访问不需要使用https,这样Typecho接收到的请求是http协议的,于是网站内部资源链接被修改成了http. 解决方案 ...
- Spark SQL快速入门
Spark SQL快速入门 1.概述 spark SQL是Apache用于处理结构化数据的模块.其中包含SQL.DataFrame API.DataSet API,意味着开发人员可以在不同的API之间 ...
- 全量通过，华为云GaussDB首批完成信通院全密态数据库评测
摘要:100%全量通过!基于全栈创新计算架构的全密态数据库华为云GaussDB,完成了中国信通院组织的首批"全密态数据库"产品能力评测. 本文分享自华为云社区<全量通过!华为 ...
- JavaScript回调函数的高手指南
摘要:本文将会解释回调函数的概念,同时帮你区分两种回调:同步和异步. 回调函数是每个前端程序员都应该知道的概念之一.回调可用于数组.计时器函数.promise.事件处理中. 本文将会解释回调函数的概念 ...
- ELT in ByteHouse 实践与展望
更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 谈到数据仓库, 一定离不开使用Extract-Transform-Load (ETL)或 Extract-Load ...
- 如何构建面向海量数据、高实时要求的企业级OLAP数据引擎？
在字节跳动各产品线飞速成长的过程中,对数据分析能力也提出了更高的要求,现有的主流数据分析产品都没办法完全满足业务要求.因此,字节跳动在ClickHouse引擎基础上重构了技术架构,实现了云原生环境的部 ...