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的安装与基本配置 ...
随机推荐
- hdu 5685
题目:http://acm.hdu.edu.cn/showproblem.php?pid=5685 解题思路:前缀积+费马小定理求逆元. AC代码: 1 #include<iostream> ...
- 开发期间flask运行方式（1.x和2.x区别）
1.x使用app.run(参数) 可以使用debug=True控制处于什么模式. app.run(host="127.0.0.1", port=5000, debug=True) ...
- Intellij IDE 对接SVN
1.安装SVN(SVN安装包见附件) 注意安装时需要选择第二个选项进行安装 2.安装SVN中文包(见附件) 安装完成后随便找个文件夹右键确认SVN安装是否生效 3.Intellij IDE得Setti ...
- 递归产生StackOverflowError
package com.guoba.digui; public class Demo01 { public void A(){ A();//自己调用自己,递归没用好,产生错误java.lang.Sta ...
- 牛客刷Java记录第6天
第一题 一个文件中的字符要写到另一个文件中,首先需要( ). A System.out.print (buffer[i]); B FileOutputStream fout = new FileOut ...
- Python脚本猜解网站登录密码（带token验证）
目录: 关键代码解释 设置请求头 get_token函数获取token值 完整代码: 运行结果: 上一篇文章:一个简单的Python暴力破解网站登录密码脚本 测试靶机为Pikachu漏洞练习平台暴力破 ...
- .net Core实战简单文件服务器
首先新建一个ASP.NET Core 项目,选中空的模板,如下图所示 在NuGet包中添加Microsoft.AspNetCore.StaticFiles 添加好以后我们在Startup.cs中添加对 ...
- Blazor快速开发框架Known-V2.0.0
Known2.0 Known是基于Blazor的企业级快速开发框架,低代码,跨平台,开箱即用,一处代码,多处运行. 官网:http://known.pumantech.com Gitee: https ...
- springboot的启动器
前言 ~ 面试的时候,被问到springboot 官方提供的启动器常见的有哪些?(头大) 正文 ~ 启动器作用: 启动器是为了 适应 一个特定的场景的,里面定义了 这个场景下 需要用到的依赖. 启动器 ...
- 聊一聊如何整合Microsoft.Extensions.DependencyInjection和Castle.Core(二)
聊一聊如何整合Microsoft.Extensions.DependencyInjection和Castle.Core(二) 前言 前文排版比较糟糕,这次我们使用vscode来写本文,,各位看客请见谅 ...