Vue的路由
Vue可以实现一种类是ajax不刷新但是切换界面 然后 只是在你的url中的当前地址后面追加信息
首先你要先当如这个路由的模块：
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <!-- 你要用路由首先先导入路由这个模块才能用 -->
路由的导入要尤记住几点;
div中的 路由的入口和路由的出口不可忘家 <router-link to='你要指向的路由'> </router-link> 这个是入口 <router-view></router-view> 这个是出口 script 中你要设置你的路由的信息 path和要渲染的内容 然后把这些 赋值给你的路由对象中的 routes 然后你的这个对象要赋值给vue实例中的router
代码：
<body>
<div id="app">
<!--路由的入口要用router-link-->
<router-link to="/index">index</router-link>
<router-link to="/home">home</router-link>
<hr>
<!--路由的出口-->
<router-view></router-view>
</div>
<!-- -->
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <!-- 你要用路由首先先导入路由这个模块才能用 -->
<script>
const routes = [
{
path:'/index', // 这个是index这个路由的地址
component:{ // 这个是这个路由要渲染的信息
template:`<div>
<h1>这是index界面</h1>
</div>`
}
},
{
path:'/home',
component:{
template:`
<div>
<h1>这个是home界面</h1>
</div>
`
}
}
]
const routerObj = new VueRouter({
routes: routes
})
var app = new Vue({
el:'#app',
data:{},
router :routerObj
})
</script>
</body>
路由实例一
我们也可以用到类似于其他语言的框架的url匹配 很多语言利用re正则来匹配 ，我们的vue也创建了模糊匹配 ，这样我们就可以用的时候， 只需要选择自己选择的就可以匹配到了相应的url
模糊匹配 我们需要在path中调整，用：来进行模糊匹配：
path:'/index/:name', // 这个是利用模糊匹配 利用： 来设置模糊匹配
我们可以利用特定的 语法来获取我们的url中的内容
$route.params.name 获取你上面的设置的path中的index后面的name的语法 只要是post的都可以这样获取
在url中输入的就是get请求的我们可以这样获取
$route.query.age 获取你在url上输入的age的值 $route.query.hobby 获取你在url上输入的hobby的值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<router-link to="/index/laowang">老王</router-link>
<router-link to="/index/laoli">老李</router-link> <router-view></router-view>
</div> <!-- -->
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <!-- 你要用路由首先先导入路由这个模块才能用 --> <script>
const routes = [
{
path:'/index/:name', // 这个是利用模糊匹配 利用： 来设置模糊匹配
component:{
template:`
<div>
<h1>这是{{ $route.params.name }}的界面</h1>
<p>{{ $route.query.age }}</p>
<p>{{ $route.query.hobby }}</p>
</div>
`
}
}
]
const routerObj = new VueRouter({
routes: routes }) var app = new Vue({
el:'#app',
router:routerObj
}) </script> </body>
</html>
模糊匹配
路由参数：
路由的参数
1. path: '/user/:name' --> 匹配路由
$route.params.name --> 取值 2. /user/alex?age=9000 --> url中携带参数
$route.query.age --> 取出url的参数
子路由：
我们还可以设置子路由：就是给我们已经设置的路由在添加路由，这个时候你要想想怎么添加路由
我们可以在渲染父路由的时候 渲染子路由
就是在以前的路由的component的template中把自路由渲染进去
path:'/index/:name',
component:{
template:
`
<div>
<p>这是{{ $route.params.name }}的界面</p>
<p>{{ $route.query.age }}</p>
<p>{{ $route.query.hobby }}</p> <hr>
<router-link to='info append'>用户信息<router-link> 把自路由添加进去 append
<router-view></router-view>
</div> `
},
然后再用children给设置子路由
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <div id="app"> <router-link to="/index/laowang">老王</router-link>
<router-link to="/index/laoli">老李</router-link> <router-view></router-view> </div> <!-- -->
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <script>
const routes = [
{
path:'/index/:name',
component:{
template:
`
<div>
<p>这是{{ $route.params.name }}的界面</p>
<p>{{ $route.query.age }}</p>
<p>{{ $route.query.hobby }}</p> <hr>
<router-link to='info append'>用户信息<router-link>
<router-view></router-view>
</div> `
},
children:[ //添加一个子路由
{
path:'/info',
component:{
template:`
<div>
<h1>钗头凤 唐婉</h1>
<p>忠厚老实人的恶毒像饭里的砂砾或脱骨鱼片里未净的刺给人一种不期待的伤痛。</p>
</div>
`
}
}
] }
] const routerObj = new VueRouter({
routes:routes
}) var app = new Vue({
el:'#app',
data:{},
router:routerObj
}) </script> </body>
</html>
Vue的路由的更多相关文章
- vue（5）—— vue的路由插件—vue-router 常用属性方法
前端路由 看到这里可能有朋友有疑惑了,前端也有路由吗?这些难道不应该是在后端部分操作的吗?确实是这样,但是现在前后端分离后,加上现在的前端框架的实用性,为的就是均衡前后端的工作量,所以在前端也有了路由 ...
- vue父路由默认选中第一个子路由，切换子路由让父路由高亮不会消失
vue父路由默认选中第一个子路由,切换子路由让父路由高亮不会消失 正常默认会有 .router-active-class 识别高亮 达到以上注意: 1. exact 不要加 注意是不要加,exact ...
- vue的路由映射问题
遇到的问题 今天在项目中遇到了一个问题,明明在Router文件夹下的路由js映射文件中,配置好了,如下: // 生日贺卡 { path: 'birthdayRemind', component: lo ...
- 前端MVC Vue2学习总结（八）——Vue Router路由、Vuex状态管理、Element-UI
一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...
- Vue.js路由
有时候,我们在用vue的时候会有这样的需求,比如一个管理系统,点了左边的菜单栏,右边跳转到一个新的页面中,而且刷新的时候还会停留在原来打开的页面. 又或者,一个页面中几个不同的画面来回点击切换,这两种 ...
- Vue.js路由详解
有时候,我们在用vue的时候会有这样的需求,比如一个管理系统,点了左边的菜单栏,右边跳转到一个新的页面中,而且刷新的时候还会停留在原来打开的页面. 又或者,一个页面中几个不同的画面来回点击切换,这两种 ...
- vue权限路由实现方式总结二
之前已经写过一篇关于vue权限路由实现方式总结的文章,经过一段时间的踩坑和总结,下面说说目前我认为比较"完美"的一种方案:菜单与路由完全由后端提供. 菜单与路由完全由后端返回 这种 ...
- Vue 多路由文件的合并
Vue 多路由文件的合并 1.使用的是ES6 数组的合并方法 let routes = new Set([...routes1, ...homerouters]);2.两个路由文件,导出的实际上就是一 ...
- vue+element-ui路由配置相关
vue+element-ui路由配置相关 转自:http://www.cnblogs.com/MonaSong/p/6703804.html vue-router2中说明了,子路由前面可以不加'/', ...
- vue嵌套路由-query传递参数（三）
在嵌套路由中我们经常会遇到父路由向子路由里面传递参数,传递参数有两种方法,通过 query 或者 params index.html <div id="app"> &l ...
随机推荐
- 4-nginx-反向代理到tomcat及负载均衡
反向代理相比于正向代理, 比如使用搬瓦工时, 就是位于客户端的正想代理, 而反向代理则是服务器端的代理, 主要用于实现请求分发, 负载均衡等功能 正向代理推荐一个: 搬瓦工, 比较好用.. 反向代理主 ...
- SpringMVC 使用 RESTful 架构实现 CRUD 操作
软件152 余建强 源码下载:http://download.csdn.net/detail/qq_35318576/9826210 1 使用框架 SpringMVC.Maven.Ajax.JSTL. ...
- SpringMVC form 表单提交报400错误
错误代码: HTTP Status 400 - type Status report message description The request sent by the client was sy ...
- tcpdump一个命令的剖析
简单介绍:用简单的话来定义tcpdump,就是:dump the traffic on a network,根据使用者的定义对网络上的数据包进行截获的包分析工具. tcpdump可以将网络中传送的数据 ...
- SQL Server提取字段中的所有数字
今天公司项目中遇到了一个需求,要求提取用户电话号码字段中的所有电话信息. 由于该字段在项目最初设计中没有严格控制数据质量,导致用户在输入时包含了很多非电话的信息,如用户名字等(136 **** *** ...
- Visual Studio 2017 系统发布部署服务器教程
Visual Studio 2017 系统发布部署服务器教程 一.公司网站部署 --- 第一档 _Visual Studio 2017 发布网站系统教程 二.公司网站部署 --- 第二档 ...
- MyEclipse中快速查看错误
当代码中有错误的时候,MyEclipse会用红线标示错误.这个时候在错误地方按下F2就会显示错误详情了.
- mysql 修改初始化密码【转】
转:http://www.jb51.net/article/39454.htm 方法1: 用SET PASSWORD命令 首先登录MySQL. 格式:mysql> set password fo ...
- HDFS要点剖析
谈到大数据,不得不提的一个名词是"HDFS".它是一种分布式文件存储系统,其系统架构图如下图所示: 从图中可以了解到的几个关键概念 元数据(MetaData) 机架(Rock) 块 ...
- Mybatis源码正确打开方式
精心挑选要阅读的源码项目: 饮水思源——官方文档,先看文档再看源码: 下载源码,安装到本地,保证能编译运行: 从宏观到微观,从整体到细节: 找到入口,抓主放次,梳理核心流程: 源码调试,找到核心数据结 ...