vue router 配置路由的方法


Posted in Javascript onJuly 26, 2018

用 Vue.js + vue-router 创建单页应用,是非常简单的。使用 Vue.js ,我们已经可以通过组合组件来组成应用程序,当你要把 vue-router 添加进来,我们需要做的是,将组件(components)映射到路由(routes),然后告诉 vue-router 在哪里渲染它们。

路由的基本实现

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <style>
  /* 实现当前 路由导航高亮 */
  .router-link-exact-active, .router-link-active {
   color: red;
   font-size: 30px;
  }
 </style> 
</head>

<body>
 <div id="app">
  <!-- 路由的入口,也就是a标签 -->
  <router-link to="/home">home</router-link>
  <router-link to="/about">about</router-link>

  <!-- 指定页面中路由的出口,也就是:路由匹配组件将来展示在页面中的位置 -->
  <router-view></router-view>
 </div>

 <script src="./vue.js"></script>
 <!-- 引入 路由插件 -->
 <script src="./node_modules/vue-router/dist/vue-router.js"></script>
 <script>
  /* 
   路由的使用步骤:
   1 引入 路由插件的js文件
   2 创建几个组件
   3 通过 VueRouter 来创建一个路由的实例,并且在参数中配置好路由规则
   4 将 路由实例 与 Vue实例关联起来,通过 router 属性
   5 在页面中使用 router-link 来定义导航(a标签) 路由路口
   6 在页面中使用 router-view 来定义路由出口(路由内容展示在页面中的位置)
   */

  // Vue中的路由是:哈希值 和 组件的对应关系

  // component 方法能够返回一个对象,用这个对象就可以表示当前组件
  const Home = Vue.component('home', {
   template: `<h1>这是 Home 组件</h1>`
  })
  const About = Vue.component('about', {
   template: `<h1>这是 About 组件</h1>`
  })

  // 配置路由规则
  const router = new VueRouter({
   // 通过 routes 来配置路由规则,值:数组
   routes: [
    // 数组中的每一项表示一个具体的路由规则
    // path 用来设置浏览器URL中的哈希值
    // componet 属性用来设置哈希值对应的组件
    { path: '/home', component: Home },
    { path: '/about', component: About },
    // redirect 重定向: 让当前匹配的 / ,跳转到 /home 对应的组件中, 也就是默认展示: home组件
    { path: '/', redirect: '/home' }
   ]
  })

  var vm = new Vue({
   el: '#app',

   // Vue的配置对象中有一个配置项叫做:router
   // 用来指定当前要使用的路由
   // router: router
   router
  })
 </script>
</body>

</html>

重定向

解释:将 / 重定向到 /home

{ path: '/', redirect: '/home' }

路由导航高亮

说明:当前匹配的导航链接,会自动添加router-link-exact-active router-link-active类

路由参数

  • 说明:我们经常需要把某种模式匹配到的所有路由,全都映射到同一个组件,此时,可以通过路由参数来处理
  • 语法:/user/:id
  • 使用:当匹配到一个路由时,参数值会被设置到 this.$route.params
  • 其他:可以通过 $route.query 获取到 URL 中的查询参数 等
// 链接:
<router-link to="/user/1001">用户 Jack</router-link>
<router-link to="/user/1002">用户 Rose</router-link>

// 路由:
{ path: '/user/:id', component: User }

// User组件:
const User = {
 template: `<div>User {{ $route.params.id }}</div>`
}

嵌套路由 - 子路由

  • Vue路由是可以嵌套的,即:路由中又包含子路由
  • 规则:父组件中包含 router-view,在路由规则中使用 children 配置
// 父组件:
const User = Vue.component('user', {
 template: `
  <div class="user">
   <h2>User Center</h2>
   <router-link to="/user/profile">个人资料</router-link>
   <router-link to="/user/posts">岗位</router-link>
   <!-- 子路由展示在此处 -->
   <router-view></router-view>
  </div>
  `
})

// 子组件:
const UserProfile = {
 template: '<h3>个人资料:张三</h3>'
}
const UserPosts = {
 template: '<h3>岗位:FE</h3>'
}

{ path: '/user', component: User,
 // 子路由配置:
 children: [
  {
   // 当 /user/profile 匹配成功,
   // UserProfile 会被渲染在 User 的 <router-view> 中
   path: 'profile',
   component: UserProfile
  },
  {
   // 当 /user/posts 匹配成功
   // UserPosts 会被渲染在 User 的 <router-view> 中
   path: 'posts',
   component: UserPosts
  }
 ]
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jquery的关于动态创建DOM元素的问题
Dec 24 Javascript
JS.elementGetStyle(element, style)应用示例
Sep 24 Javascript
js 阻止子元素响应父元素的onmouseout事件具体实现
Dec 23 Javascript
页面按钮禁用与解除禁用的方法
Feb 19 Javascript
javascript操作ul中li的方法
May 14 Javascript
JQuery boxy插件在IE中边角图片不显示问题的解决
May 20 Javascript
JS实现自动变换的菜单效果代码
Sep 09 Javascript
JS实现的简单拖拽功能示例
Mar 13 Javascript
从零开始学习Node.js系列教程之基于connect和express框架的多页面实现数学运算示例
Apr 13 Javascript
微信小程序实现带参数的分享功能(两种方法)
May 17 Javascript
js数据类型转换与流程控制操作实例分析
Dec 18 Javascript
JS制作简易计算器的实例代码
Jul 04 Javascript
vue+webpack模拟后台数据的示例代码
Jul 26 #Javascript
JavaScript设计模式之工厂模式和抽象工厂模式定义与用法分析
Jul 26 #Javascript
vue父组件异步获取数据传给子组件的方法
Jul 26 #Javascript
JavaScript设计模式之构造器模式(生成器模式)定义与用法实例分析
Jul 26 #Javascript
JavaScript设计模式之单例模式原理与用法实例分析
Jul 26 #Javascript
JavaScript设计模式之原型模式分析【ES5与ES6】
Jul 26 #Javascript
如何把vuejs打包出来的文件整合到springboot里
Jul 26 #Javascript
You might like
PHP Session机制简介及用法
2014/08/19 PHP
jQuery Mobile + PHP实现文件上传
2014/12/12 PHP
PHP实现的memcache环形队列类实例
2015/07/28 PHP
javascript String 的扩展方法集合
2008/06/01 Javascript
javascript重写alert方法的实例代码
2013/03/29 Javascript
滚动条响应鼠标滑轮事件实现上下滚动的js代码
2014/06/30 Javascript
jQuery子属性过滤选择器用法分析
2015/02/10 Javascript
兼容各大浏览器的JavaScript阻止事件冒泡代码
2015/07/09 Javascript
用jQuery获取table中行id和td值的实现代码
2016/05/19 Javascript
jQuery实现简洁的轮播图效果实例
2016/09/07 Javascript
Bootstrap popover 实现鼠标移入移除显示隐藏功能方法
2018/01/24 Javascript
通过nodejs 服务器读取HTML文件渲染到页面的方法
2018/05/17 NodeJs
vue设置导航栏、侧边栏为公共页面的例子
2019/11/01 Javascript
JS数组转字符串实现方法解析
2020/09/04 Javascript
ES6的循环与可迭代对象示例详解
2021/01/31 Javascript
[00:32]2018DOTA2亚洲邀请赛Mineski出场
2018/04/04 DOTA
[02:31]2018年度DOTA2最具人气选手-完美盛典
2018/12/16 DOTA
Python实现向QQ群成员自动发邮件的方法
2014/11/19 Python
举例讲解Python中的死锁、可重入锁和互斥锁
2015/11/05 Python
Python读取指定目录下指定后缀文件并保存为docx
2017/04/23 Python
Python编程实现双击更新所有已安装python模块的方法
2017/06/05 Python
Python内置函数delattr的具体用法
2017/11/23 Python
在Python中使用defaultdict初始化字典以及应用方法
2018/10/31 Python
python3 打开外部程序及关闭的示例
2018/11/06 Python
python自定义时钟类、定时任务类
2021/02/22 Python
django迁移数据库错误问题解决
2019/07/29 Python
Python 通过微信控制实现app定位发送到个人服务器再转发微信服务器接收位置信息
2019/08/05 Python
jenkins配置python脚本定时任务过程图解
2019/10/29 Python
多个版本的python共存时使用pip的正确做法
2020/10/26 Python
浅谈HTML5 &amp; CSS3的新交互特性
2016/07/19 HTML / CSS
函授本科毕业自我鉴定
2013/10/09 职场文书
夏季药店促销方案
2014/08/22 职场文书
2014年高校辅导员工作总结
2014/12/09 职场文书
2015国庆节66周年标语
2015/07/30 职场文书
导游词之徐州云龙湖
2019/11/19 职场文书
进阶篇之linux环境下安装MySQL数据库
2022/04/09 MySQL