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 ...
随机推荐
- bootstrap table 修改table内容时设置表头与表格对齐
第一:取消表头初始化解决表头和内容不对齐问题,取消后表头将不固定. 在你对应的js(bootstrap-table.min.js或bootstrap-table.js,我用的bootstrap-tab ...
- python笔记09-----装饰器，生成器，迭代器
1.装饰器 定义:本质是函数,(装饰其他函数)就是为其他函数添加附加功能 原则:1.不能修改被装饰的函数的源代码 2.不能修改被装饰的函数的调用方式 实现装饰器的知识储备: 1. 函数即“变 ...
- mysql数据库修改字符编码问题
遇到这种情况,现有项目的数据库已经建好,数据表也已经创建完成. 问题来的,数据库不能插入中文,调试时候发现中文数据从发送请求到最后请求处理完成这些步骤,中文还没有发生乱码. 只有在存储到数据库后查询数 ...
- （转）linux内核调优参数对比和解释
[net] ######################## cat /proc/sys/net/ipv4/tcp_syncookies # 默认值:1 # 作用:是否打开SYN Cookie功能,该 ...
- 解决MySQL联表时出现字符集不一样
mysql 建表时都会设置表的字符集和排序规则,通常是 utf8,不过我这边习惯建表的字符集是 utf8mb4,排序规则是 utf8mb4_unicode_ci.有些 utf8mb4 的表默认排序规则 ...
- 12-mapReduce的简介和yarn搭建
Hadoop的核心组件之er: mapreduce 目前的计算框架 mapreduce spark storm flink(阿里) mapreduce的核心理念: 移动计算, 而不是移动数据(redu ...
- 动态创建table表格页面出现undefined原因以及修改
源代码: var html: if(lists) { html += '<a href="https://www.4001149114.com/NLJJ/member/sharecel ...
- CEF加载FLASH插件时弹出CMD命令行窗口的问题
这个是flash插件的一个bug,CEF(chromium系列浏览器)关闭sandbox第一次加载flash插件就会跳出这样的一个提示,在Google官方也看到了chromium的issue: 解决方 ...
- [HTML5] Canvas绘制简单形状
使用canvas来进行绘画,它像很多其他dom对象一样,有很多属性和方法,操作这些方法,实现绘画 获取canvas对象,调用document.getElementById()方法 调用canvas对象 ...
- Mac下显示和隐藏隐藏文件的命令
打开终端,输入: 1.defaults write com.apple.finder AppleShowAllFiles -bool true 此命令显示隐藏文件defaults write com. ...