Vue Router （路由）详细讲解

Vue Router （路由)

路由是负责将进入的浏览器请求映射到特定的 组件 代码中。 即决定了让谁去响应客户端请求。简单说路由就是url地址和对应的资源的映射，通过一个路径的url地址，可以唯一找到一个资源。路由不包含在vue中，是一个插件，需要单独下载

下面是一个原生js写的路由原理

<template>
<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!--使用 router-link 组件进行导航 -->
    <!--通过传递 `to` 来指定链接 -->
    <!--`<router-link>` 将呈现一个带有正确 `href` 属性的 `<a>` 标签-->
    <router-link to="/">Go to Home</router-link>
    <router-link to="/about">Go to About</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</div>
</template>

<style>

</style>
<script type="text/javascript">
    
    // 1. 定义路由组件.
    // 也可以从其他文件导入
    const Home = { template: '<div>Home</div>' }
    const About = { template: '<div>About</div>' }
    
    // 2. 定义一些路由
    // 每个路由都需要映射到一个组件。
    // 我们后面再讨论嵌套路由。
    const routes = [
      { path: '/', component: Home },
      { path: '/about', component: About },
    ]
    
    // 3. 创建路由实例并传递 `routes` 配置
    // 你可以在这里输入更多的配置，但我们在这里
    // 暂时保持简单
    const router = VueRouter.createRouter({
      // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
      history: VueRouter.createWebHashHistory(),
      routes, // `routes: routes` 的缩写
    })
    
    // 5. 创建并挂载根实例
    const app = Vue.createApp({})
    //确保 _use_ 路由实例使
    //整个应用支持路由。
    app.use(router)
    
    app.mount('#app')
    
    // 现在，应用已经启动了！
</script>

1.使用Vue路由创建单页应用

通过 Vue.js，我们已经用组件组成了我们的应用。当加入 Vue Router 时，我们需要做的就是将我们的组件映射到路由上，让 Vue Router 知道在哪里渲染它们

案例

<script src="https://unpkg.com/vue@3"></script>
<script src="https://unpkg.com/vue-router@4"></script>

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!--使用 router-link 组件进行导航 -->
    <!--通过传递 `to` 来指定链接 -->
    <!--`<router-link>` 将呈现一个带有正确 `href` 属性的 `<a>` 标签-->
    <router-link to="/">Go to Home</router-link>
    <router-link to="/about">Go to About</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</div>

2.router-view

router-view 将显示与 url 对应的组件。你可以把它放在任何地方，以适应你的布局。

3.路由的配置(router/index.js)

{
path:"/about",
name:"About",
component:About
}

4.路由传参

//引入

import { createRouter, createWebHashHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import User from '../views/User.vue'
import Produce from '../views/Produce.vue'

//定义
const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/user',
    name: 'home',
    component: User
  },
  {
    path: '/produce/:id',
    name: 'produce',
    component: Produce
  },
  {
    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/AboutView.vue')
  }
]

 

5.router-link

使用一个自定义组件 router-link 来创建链接。这使得 Vue Router 可以在不重新加载页面的情况下更改 URL，处理 URL 的生成以及编码

案例

<template>
    <div id="main">
        <router-view class="views has-tabs"/>
        <div class="tabs">
            <router-link class="links ihome" to="/">首页</router-link>
            <router-link class="links icate" to="/category">分类</router-link>
            <router-link class="links iball" to="/ball">米圈</router-link>
            <router-link class="links icart" to="/cart">购物车</router-link>
            <router-link class="links iuser" to="/about">我的</router-link>
        </div>
    </div>
</template>

这样可以切换页面的时候不用重新加载页面

6.路由的传参

 import { createRouter, createWebHashHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import User from '../views/User.vue'
import Produce from '../views/Produce.vue'
const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/user',
    name: 'home',
    component: User
  },
  {
    path: '/produce/:id',
    name: 'produce',
    component: Produce
  },
  {
    path: '/about',
    name: 'about',

7.路由的跳转

<template>
    <div>
        <h1>我是产品页面</h1>
        <p>{{$route.params.id}}</p>
        <button @click="$router.back()">返回</button>
        <button @click="$router.go(-1)">返回</button>
        <button @click="$router.g0(1)">前进</button>
        <button @click="$router.forward()">前进</button>
        <button @click="$router.push('/about')">关于</button>
        <button @click="$router.replace('/about')">关于-不留历史记录 替换</button>
    </div>
</template>