您的位置：首页 >> Vue >> 《和小米一起学Vue.js》— Vue-Router安装及解析

《和小米一起学Vue.js》— Vue-Router安装及解析

[

孤狼 |

2022-07-31 23:09:22 |

Vue |

1568°C |

0条评论 ]

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

安装vue-router

1. 可以使用以下代码在现有的项目中安装路由

npm install vue-router@4

2. 也可以在CLI新建项目的时候,选择包含路由(推荐)

目录解析

CLI在还有路由模块创建项目时，会默认生成一套完整的路由案例。所以创建好的目录与之前的结构不太一样。

配置路由

在使用CLI自动创建时，会自动生成一个router文件夹。里面已经替我们写好一个默认的路由，我们来分析一下一个路由文件该怎么写。

//1.导入VueRouter
import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'

//2.使用Vue.use(插件)来安装VueRouter插件
Vue.use(VueRouter)

//3.创建一个对象routes
const routes = [
  {
    path: '/',            //对应的网址路径
    name: 'home',         //对应的路由名称
    component: HomeView   //对应的组件名称,在上方静态导入
  },
  {
    path: '/about',
    name: 'about',
    //动态导入,当路由被访问的时候才加载对应组件，这样就会更加高效。
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  }
]

//3.组装成一个路由对象
const router = new VueRouter({
  routes
})

//4.导出路由对象
export default router

调用路由

路由有了下一步就是要调用路由，路由的调用放在main.js里

import Vue from 'vue'
import App from './App.vue'
//1.导入路由, import导入路由为文件夹时,会自动寻找文件夹下的index.js文件导入,所以可以省略
import router from './router'

Vue.config.productionTip = false

new Vue({
  router, //调用路由
  render: h => h(App)
}).$mount('#app')

入口组件

上面的main.js内调用了路由，同时调用了一个 App.vue 入口组件，来看看入口组件里都有啥

<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </nav>
    <router-view/>
  </div>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}
</style>

可以看到入口组件里，放了导航条和2个超链接还有一些css，可以看成项目的入口。

router-link

请注意，我们没有使用常规的 a 标签，而是使用一个自定义组件 router-link 来创建链接。这使得 Vue Router 可以在不重新加载页面的情况下更改 URL，处理 URL 的生成以及编码。在vue解析完成之后，router-link会被解析为 a 标签。

router-view

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

页面组件

入口组件中，并没有调用其他页面，但是由于路由的存在，所以打开入口组件的时候，路由检测到相关的路径匹配，自动加载了其他组件。默认打开一个项目对应的路径起始为 “/” 所以，这里路由调用了 HomeView 页面组件。

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
// @ 是 /src 的别名
//这里导入了一个组件 HelloWorld 并在template模板中调用
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'HomeView',
  components: {
    HelloWorld
  }
}
</script>

可以看到，页面组件就是整个对应页面的框架，比如主页，列表页，内容页等等。而页面组件里面包含很多“模块组件”，由这些“模块组件”来拼合一整个页面。

模块组件

模块组件其实就是我们之前学习的单页面组件，这里只是为了理解项目结构才称为模块组件。模块组件放在 components 目录下。一般用于复用或拼装其他页面组件。

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>
      For a guide and recipes on how to configure / customize this project,<br>
      check out the
      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
    </p>
    <h3>Installed CLI Plugins</h3>
    <ul>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
    </ul>
    <h3>Essential Links</h3>
    <ul>
      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
    </ul>
    <h3>Ecosystem</h3>
    <ul>
      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

解析过程

项目解析的大致过程可以方便的理解各个文件的定位及作用。

执行入口文件main.js => 加载index.html => 加载路由 =>加载主入口组件 => 路由适配到主入口组件需要加载页面组件 => 加载页面组件 => 页面组件要求加载模块组件 => 加载模块组件 =>拼合页面组件 => 拼合主入口组件 => main.js替换index.html内的app标签为主入口组件。

当地址变化时:

路由适配到主入口组件需要加载页面组件 => 加载页面组件 => 页面组件要求加载模块组件 => 加载模块组件 =>拼合页面组件 => 拼合主入口组件 => main.js替换index.html内的app标签为主入口组件。