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 ...
随机推荐
- #pragma的一些用法
1.#pragma message message 参数:Message参数能够在编译信息输出窗口输出相应的信息,这对于源代码的信息控制特别重要,其使用方法为: #pragma message(&qu ...
- springboot-16-springboot中引入xml文件
参考原文: http://412887952-qq-com.iteye.com/blog/2293846 使用的是在spring中注入一个bean的方式来测试是否成功, 感觉略不实用, 只碰到过一次d ...
- docker 创建基础镜像
docker 安装卸妆官方说明: https://docs.docker.com/install/linux/docker-ee/centos/#os-requirements 本系列基于cento ...
- C#的TextBox获取行高
当TextBox使用多行之后,如果想获取每行的高度,似乎有点问题, TextBox.Height获取的是控件的高度, 而我们常做的是根据行的数量来决定是否要显示滚动条 如下: //不能直接获取每行的高 ...
- ASP.NET Core 中的 ORM 之 Entity Framework
目录 EF Core 简介 使用 EF Core(Code First) EF Core 中的一些常用知识点 实体建模 实体关系 种子数据 并发管理 执行 SQL 语句和存储过程 延迟加载和预先加载 ...
- Spring整合Hibernate的XML文件配置，以及web.xml文件配置
利用Spring整合Hibernate时的XML文件配置 applicationContext.xml <?xml version="1.0" encoding=" ...
- Microsoft SQL SERVER 2008 R2 REPORT SERVICE 匿名登录
SQL SERVER 2008 R2 是微软目前最新的数据库版本,在之前的SQL SERVER 2005中,我们可以通过修改IIS对应的SSRS站点及SSRS的配置文件,将SSRS配置成匿名登录的方式 ...
- Vertica添加磁盘
本次实验环境是在虚拟机上 Vmware 12 操作系统是Centos 6.5 64位 1. 首先停止节点上的Vertica数据库,具体方法有很多 admintools -t stop_node -s ...
- MFC数据库操作
本例采用Microsoft SQL2008建立的一个数据库表 /****链接数据库操作**/ 在stdafx.h的头文件中加入 #import "C:\Program Files\Commo ...
- Java利用反射取得类的所有信息
Java中可以利用反射获取类的名称.构造函数.属性.方法.也就是说可以通过反射可以取得类的所有信息(不管该成员是否封装为private). 如有下面的Dept类定义: package org.lyk. ...