Vue2 教程

    2.  
  2. 主页
  3.  / 
  4. Vue2 教程
  5.  / 
  6. Vue教程之路由详解

Vue教程之路由详解

路由参数

普通参数

定义路由

export default [
  {
    path: '/day03/demo2',
    component: () => import('../views/day03/demo2.vue')
  }
]

页面跳转，? 的方式传递参数。

<template>
  <div>
    <router-link to="/day03/demo1?id=1">跳转</router-link>
  </div>
</template>

在目标页面获取参数

this.$route.query.id

路径参数

路径参数，即参数是路由的一部分，若是没有参数则路由不成立，报404错误。

定义路由

export default [
  {
    path: '/day03/demo3/:id',
    component: () => import('../views/day03/demo3.vue'),
    props: true
  }
]

跳转方式

<template>
  <div>
    <router-link to="/day03/demo3/1">跳转</router-link>
  </div>
</template>

第一种获取参数的方式

this.$route.params.id

第二种获取参数的方式，使用这种方式获取参数，则需要定义路由的时候，配置 props 属性为 true 。

props: ['id']

命名路由

顾名思义，命名路由就是给路由起一个名字，我们可以通过这个名字进行路由跳转。

定义路由

export default [
  {
    path: '/day03/demo3/:id',
    name: 'Day03Demo3',
    component: () => import('../views/day03/demo3.vue'),
    props: true
  }
]

通过路由名称进行路由跳转及参数传递

<template>
  <div>
    <router-link :to="{name: 'Day03Demo3', params: {id: 1}, query: {id: 2}}">跳转</router-link>
  </div>
</template>
  • query : 普通参数
  • params : 路径参数

编程式导航

编程式导航，即通过绑定事件的方式通过全局 $router 对象，进行路由跳转。

<template>
  <div>
    <button @click="handleTo">跳转</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleTo () {
      // 通过 name 跳转，可使用 query 和 params 传递对应类型的参数，如下：
      this.$router.push({ name: 'Day03Demo3', query: { id: 1 }, params: { id: 1 } })

      // 通过 path 跳转，则 params 参数需直接写入到路径中，query 参数通过 query 属性传递，如下：
      this.$router.push({ path: '/day03/demo3/1', query: { id: 1 } })
    }
  }
}
</script>

嵌套路由

使用 children 关键字在现有路由中嵌入路由。

router/index.js 内容如下：

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    children: [ // 嵌套路由
      {
        path: 'user',
        name: 'User',
        component: User
      }
    ]
  }
]

需注意嵌套路由，子路由会继承父路由的views页面。同时父路由的views中，需要使用 router-view 标签接收子路由的views。

<template>
  <div class="home">
    <router-link to="/user">to User</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'Home'
}
</script>

子路由的views页面。

<template>
  <div>
    <h1>User</h1>
  </div>
</template>

命名视图

有时候想同时 (同级) 展示多个视图，而不是嵌套展示。你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果 router-view 没有设置名字，那么默认为 default。

一个视图使用一个组件渲染，因此对于同个路由，多个视图就需要多个组件。确保正确使用 components 配置 (带上 s)：

router

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    children: [
      {
        path: 'user',
        name: 'User',
        components: {
          user: User,
          user1: User1,
          default: User2
        },
        props: { // 路径参数
          default: true,
          user: true,
          user1: true
        }
      }
    ]
  }
]

Home 视图

<template>
  <div class="home">
    <router-link to="/user">to User</router-link>
    <router-view name="user"></router-view>
    <router-view name="user1"></router-view>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'Home'
}
</script>

重定向

重定向，顾名思义就是说，让我们访问一个路由的时候，程序会自动将路由跳转到其他的路由，这就是重定向了。

使用 redirect 关键字，进行路由重定向。

使用路径进行重定向

const routes = [
  {
    path: '/home',
    redirect: '/'
  }
]

使用 name 重定向

const routes = [
  {
    path: '/home',
    redirect: { name: 'Home' }
  }
]

函数使用 路径 的方式重定向

const routes = [
  {
    path: '/home',
    redirect: to => {
      return '/'
    }
  }
]

函数使用 名称 的方式重定向

const routes = [
  {
    path: '/home',
    redirect: to => {
      return { name: 'Home' }
    }
  }
]

别名

别名，就是为路由的路径重新定义一个名字，浏览器的地址栏里面显示的是路由别名，但实际上访问的是实际的路由地址。

使用 alias 关键字定义别名

const routes = [
  {
    path: '/',
    name: 'Home',
    alias: '/index', // 定义别名
    component: Home
  }
]

“别名” 的功能让你可以自由地将 UI 结构映射到任意的 URL，而不是受限于配置的嵌套路由结构。

路由传参的三种方式

布尔模式

const routes = [
  {
    path: '/index/:id',
    name: 'Index',
    component: Index,
    props: true
  }
]

对象模式

const routes = [
  {
    path: '/index/:id',
    name: 'Index',
    component: Index,
    props: {
      id: 456
    }
  }
]

函数模式

通过函数的方式传参

const routes = [
  {
    path: '/index/:id',
    name: 'Index',
    component: Index,
    props: (route) => {
      return { id: route.params.id, title: route.query.title }
    }
  }
]

通过 ES6 将函数的方式简化

const routes = [
  {
    path: '/index/:id',
    name: 'Index',
    component: Index,
    props: (route) => ({ id: route.params.id, title: route.query.title })
  }
]

vue-router 的两种模式

hash

在 url 中的 # 之后对应的是 hash 值, 其原理是通过hashChange() 事件监听hash值的变化, 根据路由表对应的hash值来判断加载对应的路由加载对应的组件。

优点：

  • 只需要前端配置路由表, 不需要后端的参与
  • 兼容性好, 浏览器都能支持
  • hash值改变不会向后端发送请求, 完全属于前端路由

缺点：

  • hash值前面需要加#, 不符合url规范,也不美观

history

history运用了浏览器的历史记录栈，之前有back,forward,go方法，之后在HTML5中新增了pushState（）和replaceState（）方法，它们提供了对历史记录进行修改的功能，不过在进行修改时，虽然改变了当前的URL，但是浏览器不会马上向后端发送请求。

优点：

  • 符合url地址规范, 不需要#, 使用起来比较美观

缺点

  • 在用户手动输入地址或刷新页面时会发起url请求, 后端需要配置index.html页面用户匹配不到静态资源的情况, 否则会出现404错误。
  • 兼容性比较差, 是利用了 HTML5 History对象中新增的 pushState() 和 replaceState() 方法,需要特定浏览器的支持。
这篇文章对您有用吗？ 是 否

我们要如何帮助您？

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注