【Vue】路由使用详解

一、路由简介

vue组件中实现页面的跳转

二、使用Vue脚手架创建路由

创建项目时选择上Router

如何创建项目？创建Vue项目

目录大概是这样
index.js 主要配置路由
views下主要是跳转的页面

三、创建一个路由页面

1、在views中创建一个vue
例：User.vue

<template>
  <div><h2>This is User's Center</h2></div>
</template>

<script>
export default {};
</script>

<style>
</style>

2、
在index.js中增加路由规则走向(const routes中)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    //异步加载
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  },
  {
    path: '/user',
    //异步加载组件
    component: () => import('../views/User.vue')
  }
	]

3、在App.vue导航中增加路由链接

<!-- 导航 -->
<div id="nav">
  <router-link to="/">Home</router-link> |
  <router-link to="/about">About</router-link>|
  <router-link to="/user">用户中心</router-link>
</div>

结果：

四、动态路由匹配

1、给路由传递参数/接受参数

例：

const routes = [
  // 动态字段以冒号开始
  { path: '/users/:id', component: User },
]

将上面index.js改写成：

  {
    path: '/user:username',
    component: () => import('../views/User.vue')
  }

App.vue

  <router-link to="/user/张三">用户中心</router-link>

而不加 /user 不会显示信息

2、获取动态路由传递的参数

this.$route.xxx
App.vue：

<!-- 导航 -->
<div id="nav">
  <router-link to="/">Home</router-link> |
  <router-link to="/about">About</router-link>|
  <router-link to="/user/张三">用户中心</router-link>
</div>

User.vue：

<template>
  <div>
      <h2>This is User's Center</h2>
        <p>获取传递的参数：{{$route.params.username}}</p>
  </div>
</template>

五、嵌套路由

方法：
在原本路由下配置children

例：
首先创建了两个路由页面
Mae.vue:

<template>
  <div>
      <h2>Mae用户页面</h2>
  </div>
</template>

Naomi.vue:

<template>
  <div><h2>Naomi用户页面</h2></div>
</template>

在index.js中的user下添加二级路由

path: '/user',
component: () => import('../views/User.vue'),
children:[
  {
    path:"mae",
    component: () => import('../views/Mae.vue')   
  },
  {
    path:"naomi",
    component:()=>import('../views/Naomi.vue')
  }
]

在User.vue中引入路径
注意：二级路由的出口

<template>
  <div>
      <h2>This is User's Center</h2>
        <!-- 嵌套路由 -->
        <router-link to='/user/mae'>Mae</router-link>|
        <router-link to='/user/naomi'>Naomi</router-link>
        <!-- 二级路由出口 -->
        <router-view></router-view>
  </div>
</template>

六、重定向

还是上面的案例
与path同级添加redirect

  {
    path: '/user',
    component: () => import('../views/User.vue'),
    redirect:"/user/naomi",
    children:[
      {
        path:"mae",
        component: () => import('../views/Mae.vue')   
      },
      {
        path:"naomi",
        component:()=>import('../views/Naomi.vue')
      }
    ]
  }

点击用户中心就直接进入了 naomi页面

七、编程式导航(通过js跳转路由).

<template>
  <div class="home">
    <h2>Home界面</h2>
    <!-- 标签式导航 -->
    <router-link to="/user/mae">跳转到Mae页面</router-link>
    <!-- 编程式导航 -->
    <button @click="toUser">跳转到用户界面</button>
    <button @click="toAbout">跳转到About</button>
  </div>
</template>

<script>
export default {
  methods: {
    toUser() {
      //跳转到路由界面
      //1、字符串  push('/path路径')
      this.$router.push("/user");
      //2、对象
      this.$router.push({
        path: "/user",
      });
    },
    toAbout() {
      //3、命名路由
      this.$router.push({
        name: "About",
        //可以传递参数(对象)
        params: {
          id: "1",
        },
      });
      //4、如果时path 不能使用params传参 可以如下方式传参
      this.$router.push({
        path:"/about/1"    
      })
    },
  },
};
</script>