vue-router的使用总结

        以一个刚接触vue的新人角度谈一谈router的使用逻辑吧，我翻了很多类似的教程讲关于router路由，其实对于一个新手来说还是有点难以理解。

先放一个我的例子。

我的vue版本号：

（5.0.8）

我的router：

（4.1.6）

项目目录：

 

App.vue

<template>
  <div>
      <router-view></router-view>
  </div>
</template>

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

main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')

 index.js(路由代码)

import { createRouter, createWebHashHistory } from 'vue-router'

import LoginPage from '../components/LoginPage'
import MainPage from '../components/MainPage'
import RegisterPage from '../components/RegisterPage'

const routes = [
    {
        path: "/",
        component: MainPage,
        children: [
            {
                path: "/MainPage",
                name: 'MainPage',
                component: MainPage
            },
            {
                path: '/LoginPage',
                name: 'LoginPage',
                component: LoginPage
            },
            {
                path: '/RegisterPage',
                name: 'RegisterPage',
                component: RegisterPage
            }
        ]
    }
]

const router = createRouter({
    history: createWebHashHistory(),
    routes
})
export default router

LoginPage.vue

<template>
    <h1>这是 Login 组件</h1>
    <router-link to="/MainPage">Main</router-link> |
    <router-link to="/RegisterPage">Register</router-link>
</template>

<script>
export default {
    name: "LoginPage"
}
</script>

MainPage.vue

<template>
  <div>
    <h1>这是 Main 组件</h1>
    <router-link to="/MainPage">Main</router-link> |
    <router-link to="/LoginPage">Login</router-link> |
    <router-link to="/RegisterPage">Register</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "MainPage",
};
</script>

RegisterPage.vue

<template>
    <h1>这是 Register 组件</h1>
    <router-link to="/MainPage">Main</router-link> |
    <router-link to="/LoginPage">Login</router-link>
</template>

<script>
export default {
    name: "RegisterPage"
}
</script>

效果是这样的（框框不是）：

 无论点击上一栏还是下一栏的链接，都会使框框中的内容发生改变，而上面的内容是不变的。

这个例子是为了便于理解，等会进行分析。

vue内置组件

首先，要先认识以下两个组件：

1.<router-link to="/"></router-link>

2.<router-view></router-view>

第一个组件就是类似于herf=""超链接，在to=""中输入url就可以定位到其他页面；第二个组件相当于是页面占位，用于显示你链接的页面内容。下面进行详细分析。

App.vue是一个单页面应用

        我们通过vue-cli脚手架创建的vue项目是一个单页面应用，单页面应用就是指一个系统只加载一次资源，然后下面的操作交互、数据交互是通过router、ajax来进行，页面并没有刷新，这个没有刷新的页面就是App.vue。

        所以我们可以这么理解，我们通过link语句链接到的页面内容是以组件的形式出现在app.vue页面上的，而那个组件就是view语句。

        这就是我的例子里App.vue文件中只写了<router-view></router-view>语句的原因，因为如果在App.vue中写了link语句，那么不管怎么写路由，这个link语句的链接会一直挂在页面上。

        而index.js文件中的path: "/",component: MainPage，就是表明该应用的主路由，也就是一进入网站就会看到的页面内容。

        下面的children，就是子路由，其中声明的路由不会影响到主路由。

分析例子

        在我的例子中，App.vue就是根目录，而进入这个应用时，首先显示的，肯定是这个页面有哪些组件，我的页面中，只有<router-view></router-view>一个组件，此时页面就会去找到它的主路由，也就是path: "/"，我的主路由是MainPage.vue，而除了这个路由以外，没有其它和它处于同一层次的路由，那么这部分组件就将永远显示在页面上。MainPage.vue中的<router-view></router-view>组件所显示的就是子路由中的内容。其它三个路由都是声明在children也就是子路由中的，所以这三个路由会在第二个view组件中互相影响，变换第二个组件的页面内容，却不会影响到第一个view组件的路由内容。

        如果将路由文件中的四个路由并列，那么MainPage.vue中的<router-view></router-view>组件就将不能显示。

        一层路由显示一层路由的内容，页面中的路由层次是由view描述的，路由文件中的路由层次是由子路由描述的，层次描述要一一对应。 一层路由只能显示那一层路由的内容。就像我的例子中，第一层路由只能显示主路由MainPage.vue，第二层路由却可以显示三个子路由中的内容。