vue router 配置路由的方法

用 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
  }
 ]
}

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

(0)

相关推荐

  • vue动态路由配置及路由传参的方式

    动态路由: 当我们很多个页面或者组件都要被很多次重复利用的时候,我们的路由都指向同一个组件,这时候从不同组件进入一个"共用"的组件,并且还要传参数,渲染不同的数据 这就要用到动态路由跟路由传参了! 首先我们来了解下router-link这个组件: 简单来说,它是个导航器,利用to属性导航到目标组件,并且在渲染的时候会自动生成一个a标签,当然官方也有说明,加个tag标签属性就可以渲染不同的标签,可以浏览器端查看到 并且当一个导航器被激活的时候,会自动加上一个css的激活样式,可以全局在路

  • Vue路由对象属性 .meta $route.matched详解

    $route.fullPath 1 路由是:/path/:type真正路径是:/path/list 2 path匹配路径: /path/list 3 fullPath匹配路由: /path/:type 路由元信息 .meta const router = new VueRouter({ routes: [ { path: '/foo', component: Foo, children: [ { path: 'bar', component: Bar, // a meta field meta:

  • 全面解析vue router 基本使用(动态路由,嵌套路由)

    路由,其实就是指向的意思,当我点击页面上的home按钮时,页面中就要显示home的内容,如果点击页面上的about 按钮,页面中就要显示about 的内容.Home按钮  => home 内容, about按钮 => about 内容,也可以说是一种映射. 所以在页面上有两个部分,一个是点击部分,一个是点击之后,显示内容的部分. 点击之后,怎么做到正确的对应,比如,我点击home 按钮,页面中怎么就正好能显示home的内容.这就要在js 文件中配置路由. 路由中有三个基本的概念 route,

  • vue-router 中 meta的用法详解

    如果我想做下面这个功能: 路由 代码: 用这个获取 以上这篇vue-router 中 meta的用法详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • vue addRoutes实现动态权限路由菜单的示例

    需求 最近接手一个后台管理系统,需要实现导航菜单从后台拉取的效果:根据登录用户的权限不同分别拉出来的导航菜单也不一样,另外可操作的界面也存在区别. 问题 因为后台管理系统是准备使用vue+vue-router+element-ui+vuex的搭配来做的,可是单页应用在进入页面之前就已经将vue-router实例化并且注入vue实例中了,所以在进入登录页面的时候旧没办法在重新定制路由了.接下来各种百之谷之,发现vue-router在2.0版本中提供了addRoutes方法添加路由,希望的曙光出现.

  • vue router总结 $router和$route及router与 router与route区别

    vue router总结 $router和$route及router与 router与route区别 1 this.$router和this.$route的区别 vue router this.$router是VueRouter的实例方法,当导航到不同url,可以使用this.$router.push方法,这个方法则会向history里面添加一条记录,当点击浏览器回退按钮或者this.$router.back()就会回退之前的url. this.$route相当于当前激活的路由对象,包含当前ur

  • vue router 配置路由的方法

    用 Vue.js + vue-router 创建单页应用,是非常简单的.使用 Vue.js ,我们已经可以通过组合组件来组成应用程序,当你要把 vue-router 添加进来,我们需要做的是,将组件(components)映射到路由(routes),然后告诉 vue-router 在哪里渲染它们. 路由的基本实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&

  • 关于Vue Router中路由守卫的应用及在全局导航守卫中检查元字段的方法

    #在切换路由时,组件会被复用,不过,这也意味着组件的生命周期钩子不会再被调用. 解决办法有两种,1简单地 watch (监测变化) $route 对象: const User = { template: '...', watch: { '$route' (to, from) { // 对路由变化作出响应... } } } 2.使用 2.2 中引入的 beforeRouteUpdate 导航守卫: const User = { template: '...', beforeRouteUpdate

  • Vue.js框架路由使用方法实例详解

    Vue.js框架路由使用方法实例详解 html代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name='viewport' content='width=device-width,initial-

  • vue router动态路由设置参数可选问题

    在日常工作中,我们需要将匹配到的所有路由,映射到一个组件上. 如下代码想要达到的效果: 不传page和id,则映射到user默认list页面 传page和id,根据page不同,显示不同的页面 问题 使用以下代码片段是不能实现以上效果的,因为默认情况下page和id参数是必传的,如果不传参数,则会根据默认路由跳转到home页面 new Router({ routes: [ { path: '/user/:page/:id', name: 'User', component: () => impo

  • vue 实现动态路由的方法

    很多时候我们在项目的路由都是在前端配置好的 但是有的时候为了进行全面的权限控制,会需要后台给出路由表,前端再渲染.不用在前端配置. 下面主要讲一下思路 1.和后台小哥哥沟通好数据,把我们前端配置的路由表数据给他,他就能看懂了 2.拿到数据需要我们自己再处理 路由中的component后台是给不了的,这里我们只需要后台小哥哥按照我们提供的前端component路径给数据,我们循环加载就可以了 //view就是后台给的数据 return () => import(`@/view/modules/${

  • vue router动态路由下让每个子路由都是独立组件的解决方案

    vue-router 之动态路由 vue-router官网上面是这样说的 // 带查询参数,变成 /register?plan=private router.push({ path: 'register', query: { plan: 'private' }}) 然后,我就这样写了: this.$router.push({path:'manage', query: {id: 'tasklist'}})1 结果很明显,失败了.然后我就默默的再次看了一下官网,结果发现了这句话 // 命名的路由 r

  • vue router 通过路由来实现切换头部标题功能

    在做单页面应用程序时,一般页面布局头尾两块都是固定在布局页面,中间为是路由入口.这时访问页面时头部标题不会变,该问题的解决方案如下: 通过采用组件内路由卫士(beforeRouterEnter.beforeRouterUpdate)与路由元信息(meta) 来实现更新头部标题信息.点击查看文档 beforeRouterEnter:第一次进入时调用. beforeRouterUpdate:重复使用当前组件时调用. 效果图如下: 注意看页面标题与图标变换  路由元信息(meta)配置 在路由元信息中

  • vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法

    解决vue-router嵌套路由(子路由)在history模式下刷新无法渲染页面的问题,具体内容如下 一. 异常描述 本来使用的是vue-router的hash模式,但是hash模式下url需要带"#"符号,不仅看起来不舒服,而且有些场景下是会破坏路由中的"#"(微信分享页面就会把"#"后边的内容处理掉),所以就需要使用history模式,然后就让后端改下nginx配置: location / { try_files $uri $uri/ /in

  • vue router 动态路由清除方式

    目录 router 动态路由清除 vue-router退出登录清空路由 router 动态路由清除 重置matcher可达到路由还原效果 在用户退出时调用 resetRouter(router) 即可还原路由 import Vue from 'vue' import Router from 'vue-router' import { constantRouterMap } from '...' //导入初始化router   // 传入当前router export function reset

  • Vue Router嵌套路由(children)的用法小结

    目录 简介 使用场景 官网网址 示例 路由配置 用户页面(父页面) 子路由的path前加“/” 简介 说明 本文介绍Vue Router的嵌套路由的用法. 嵌套路由就是父路由里面嵌套他的子路由,父路由有自己的路由导航和路由容器(router-link.router-view),通过配置children可实现多层嵌套.(router-view必须要有,否则点击了router-link后,路径会变化,但页面不改变). 使用场景 嵌套路由用于实现页中页效果.例如: 用户页面中,有登录页面和注册页面,这

随机推荐