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 ...
随机推荐
- Tensorflow 方法记录
1.tf.convert_to_tensor:传入的list必须是一个有固定长度的list,如果为2维的list,第二维的list的长度必须是固定. 2.tf.layers.conv1d(),默认宽卷 ...
- elasticsearch（一）：JAVA api操作
1.创建一个mavan项目,项目的以来配置如下. <?xml version="1.0" encoding="UTF-8"?> <projec ...
- 前端富文本编辑器 vue-html5-editor
1..项目创建与初始化 在安装好脚手架的依赖后,要执行 npm install vue-html5-editor -S 来安装这个富文本插件,由于这个富文本插件的图标是依赖font-awesome.c ...
- for-in循环
//for in循环遍历var objs={"username":"hh","age":"20","sex&q ...
- rails image_tag生成图片标签
image_tag(source, options={}) Link Returns an HTML image tag for thesource. The source can be a full ...
- Java连接GBase并封装增删改查
1.介绍 GBase 是南大通用数据技术有限公司推出的自主品牌的数据库产品,目前在国内数据库市场具有较高的品牌知名度;GBase品牌的系列数据库都具有自己鲜明的特点和优势:GBase 8a 是国内第一 ...
- java开发一个应用的总结
需要注意的地方: (1)业务点要提前列出来,这样可防止遗漏: (2)关键业务点一定要反复确定,最好能做个测试demo出来,在没有完成之前,Everything is possible: (3)有陌生的 ...
- cordova打包APK，SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode ...
javascript 严格模式 第一次接触let关键字,有一个要非常非常要注意的概念就是”javascript 严格模式”,比如下述的代码运行就会报错: let hello = 'hello worl ...
- 我理解的js中预解释
浏览器在执行代码前,先找带var和带function的地方,把带var的声明且赋予初始值undefined,把带function的声明且定义. 带var关键字预解释 让我们先看下这段代码执行的结果: ...
- handlebars——另外一个模板引擎
什么是handlebars? handlebars库是另外一个模板引擎,他继承mustache(胡子),感觉没有jade(珠宝)好听,他不允许在模板中写很多JavaScript的逻辑.这有助于保持模板 ...