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 相关文章推荐
js不是基础的基础
Dec 24 Javascript
url 特殊字符 传递参数解决方法
Jan 01 Javascript
JS 树形递归实例代码
May 18 Javascript
javascript使用中为什么10..toString()正常而10.toString()出错呢
Jan 11 Javascript
js将json格式内容转换成对象的方法
Nov 01 Javascript
JavaScript常用脚本汇总(一)
Mar 04 Javascript
浅谈Javascript数组索引
Jul 29 Javascript
javascript 使用for循环时该注意的问题-附问题总结
Aug 19 Javascript
JavaScript 对象详细整理总结
Sep 29 Javascript
使用AngularJS对表单提交内容进行验证的操作方法
Jul 12 Javascript
webpack构建vue项目的详细教程(配置篇)
Jul 17 Javascript
使用puppeteer爬取网站并抓出404无效链接
Dec 20 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跨域cookie共享使用方法
2014/02/20 PHP
php在线解压ZIP文件的方法
2014/12/30 PHP
Yii2如何批量添加数据
2016/05/17 PHP
PHP 搜索查询功能实现
2016/11/29 PHP
记录一次排查PHP脚本执行卡住的问题
2016/12/27 PHP
浅谈PHP中的那些魔术常量
2020/12/02 PHP
js计数器代码
2006/11/04 Javascript
js加解密 脚本解密
2008/02/22 Javascript
IE6不能修改NAME问题的解决方法
2010/09/03 Javascript
Js sort排序使用方法
2011/10/17 Javascript
js编写trim()函数及正则表达式的运用
2013/10/24 Javascript
JS实现黑色风格的网页TAB选项卡效果代码
2015/10/09 Javascript
jquery事件的ready()方法使用详解
2015/11/11 Javascript
AngularJS中比较两个数组是否相同
2016/08/24 Javascript
js导出excel文件的简洁方法(推荐)
2016/11/02 Javascript
JS简单实现父子窗口传值功能示例【未使用iframe框架】
2017/09/20 Javascript
JS实现中英文混合文字溢出友好截取功能
2018/08/06 Javascript
微信小程序多音频播放进度条问题
2018/08/28 Javascript
原来JS还可以这样拆箱转换详解
2019/02/01 Javascript
基于Vue.js与WordPress Rest API构建单页应用详解
2019/09/16 Javascript
node.js域名解析实现方法详解
2019/11/05 Javascript
jQuery AJAX应用实例总结
2020/05/19 jQuery
详解JavaScript中的this指向问题
2021/02/05 Javascript
[57:31]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第一场 2月1日
2021/03/11 DOTA
Python MySQLdb Linux下安装笔记
2015/05/09 Python
Python中用max()方法求最大值的介绍
2015/05/15 Python
详解Python 正则表达式模块
2018/11/05 Python
pytorch动态网络以及权重共享实例
2020/01/06 Python
Django调用支付宝接口代码实例详解
2020/04/04 Python
CSS3中:nth-child和:nth-of-type的区别深入理解
2014/03/10 HTML / CSS
T3官网:头发造型工具
2019/12/26 全球购物
物理学专业自荐信
2014/06/11 职场文书
个人师德师风自我剖析材料
2014/09/29 职场文书
违反工作规定检讨书范文
2014/12/14 职场文书
毕业实习计划书
2015/01/16 职场文书
《蚂蚁和蝈蝈》教学反思
2016/02/22 职场文书