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 ...
随机推荐
- svn合并分支到主干
将分支pear_For2.3的最终版本合并到主干pear,操作步骤如下:1.选中主干pear右击-> Team -> 合并,弹出如下所示: 到此分支合并到主干已完成,若代码有冲突需找到冲突 ...
- nginx的gzip模块
gzip模块是我们在nginx里面经常用到的,压缩响应的数据,这通常有助于将传输数据的大小减少一半甚至更多.可以让我们访问网站更为流畅. Syntax Default Context gzip on ...
- Oracle数据库之PL/SQL程序基础设计
一.PL/SQL块结构 前边我们已经介绍了PL/SQL块的结构,再来回顾一下: DECLARE /* * 声明部分——定义常量.变量.复杂数据类型.游标.用户自定义异常 */ BEGIN /* * 执 ...
- Rails中的增删改查
1. rails中类与对象与SQL中表与行的关系 rails中提供了对象关系映射(ORM),将模型类映射至表,模型类的关联表名是类名小写后的复数形式,如类名Order,对应的表名为o ...
- Mybatis中分表插件shardbatis使用说明
Mybatis中实现分表,有个很简单的插件,叫shardbatis,使用maven构建的工程,可以在pom.xml中添加依赖性即可: <!-- 分库分表插件 --> <depende ...
- C# 获取config文件 实体转换
随着项目的扩展,单独的key,value配置文件已经不能满足需求了 这里需要自定义配置节点,例如 <!--自定义 具体实体类配置问节点信息--> <School Name=" ...
- lazy-mock ，一个生成后端模拟数据的懒人工具
lazy-mock lazy-mock 是基于koa2构建的,使用lowdb持久化数据到JSON文件.只需要简单的配置就可以实现和json-server差不多的功能,但是比json-server更 ...
- Abp中SwaggerUI的多个接口文档配置说明
对外提供的接口在实际生成过程中,可能是需要一个接口版本的,比如说v1,manage.效果如下: 在swagger中怎么实现呢? 1. 添加SwaggerVersionHelper.cs pub ...
- AE开发流程
using System;using System.Collections.Generic;using System.ComponentModel;using System.Data;using Sy ...
- IDEA中Maven切换国内源
国内访问Maven仓库非常慢,笔者今天忘记切换国内源更新Maven仓库竟然更新了一下午.如果改成国内的源,那么很快就更新完成了. 在IDEA中打开“Settings”(快捷键++): 在搜索框中输入“ ...