1>router-link和router-view組件

2>路由配置

a.動態路由

import Home from "@/views/Home.vue";

export default [
  {
    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: "/argu/:name",//動態路由
    component: () => import("@/views/argu.vue")
  }
];

<template>
  <div>
    <!-- 拿到動態路由的參數 $route:當前加載頁面的路由對象 -->
    {{$route.params.name}}
  </div>
</template>

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

b.嵌套路由

import Home from "@/views/Home.vue";
export default [
  {
    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: "/argu/:name",
    component: () => import("@/views/argu.vue")
  },
  //嵌套路由的使用
  {
    path: "/parent",
    component: () => import("@/views/parent.vue"),
    children: [
      {
        path: "child",//此處不能加/
        component: () => import("@/views/child.vue")
      }
    ]
  }
];

child.vue:

<template>
  <div>I am child</div>
</template>

c.命名路由

import Home from "@/views/Home.vue";

export default [
  {
    path: "/",
    name: "home",//加上name屬性  命名路由
    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: "/argu/:name",
    component: () => import("@/views/argu.vue")
  },
  //嵌套路由的使用
  {
    path: "/parent",
    component: () => import("@/views/parent.vue"),
    children: [
      {
        path: "child",
        component: () => import("@/views/child.vue")
      }
    ]
  }
];

d.命名視圖

import Home from "@/views/Home.vue";

export default [
  {
    path: "/",
    name: "home",//加上name屬性  命名路由
    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: "/argu/:name",
    component: () => import("@/views/argu.vue")
  },
  //嵌套路由的使用
  {
    path: "/parent",
    component: () => import("@/views/parent.vue"),
    children: [
      {
        path: "child",
        component: () => import("@/views/child.vue")
      }
    ]
  },
  {
    path: "/named_view",
    //加載多個組件 用復數
    components: {
      default: () => import("@/views/child.vue"),
      email: () => import("@/views/email.vue"),
      tel:()=>import("@/views/tel.vue")
    }
  }
];

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link>|
      <!-- 命名路由 -->
      <router-link :to="{name:'about'}">About</router-link>
      <!-- <router-link to="/about">About</router-link> -->
    </div>
    <!-- 路由視圖組件 -->
    <router-view/>
    <router-view name="email"/>
    <router-view name="tel"/>
  </div>
</template>

child.vue

<template>
  <div>I am child</div>
</template>

email.vue

<template>
  <div>email:07807958@qq.com</div>
</template>

tel.vue

<template>
  <div>tel:18976543210</div>
</template>

打開瀏覽器：http://localhost:8080/#/named_view

打開調試工具，可以直觀的看出各路由：

3>JS操作路由(編程式導航)

4>重定向和別名

import Home from "@/views/Home.vue";

export default [
  {
    path: "/",
    name: "home", //加上name屬性  命名路由
    component: Home
  },
  {
    path: "/main",
    // redirect: "/",

    // redirect: {
    //   name:"home"
    // }
    
    redirect: to => {
      //console.log(to);
      // return {
      //   name:"home"
      // }
      return '/'
    }
  }
];

console.log(to)輸出信息：

路由別名：

export default [
  {
    path: "/",
    alias:'/home_page',
    name: "home", //加上name屬性  命名路由
    component: Home
  }]

總結

以上是生活随笔為你收集整理的Vue路由讲解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。