Vue Router 入门

——大部分内容来源《Vue Router v4.0官方文档》

安装

npm install vue-router@4

除了使用npm安装以外，还可以利用vue-cli脚手架选择Router安装。

入门

创建单页面应用，用Vue组件组成应用，Vue Router将组件映射到路由上，从而知道在哪里渲染组件。

完整的Router应用包括：html中的<router-view>以及js中的router实例。

html或vue文件中：

<router-link to="/about">A Link</router-link>
<router-view></router-view>

<router-link></router-link>

有导航作用，但并不是必须的。

将呈现一个带有正确href属性的<a>。没有使用<a>而是一个自定义组件<router-link>来创建链接的原因是，可以让Vue Router在不重新加载页面的情况下更改URL，处理URL的生成以及编码。因为更改的是部分组件，而不是整个页面，所以不会重新加载整个页面。

to属性指定链接，对应router实例中的path。例如上文中的to='/'，最后href呈现的是'#/about'。

<router-view/>

路由出口。路由匹配到(通过path或name)的组件将渲染在这里。将显示与url对应的组件，可以把它放在任何地方。

Js文件中：

1.准备路由组件(两种方式)

1.1 直接在当前文件中定义路由组件

const About = {template: '<div>这是About页面</div>'}

1.2 从其他文件中导入路由组件

import About from "@/views/About";

2.定义一些路由

const routes = [
   {
        path: '/about',
        name: 'About',
        component: About
    },
    {
        path: '/',
        name: 'Home',
        component: () => import('@/views/Home')
    }
]

路由映射组件的方式有两种：静态导入和动态加载。分别对应上面两个路由对象的component。细节后文会谈到。

3.创建路由实例并传递routes配置(两种方式)

3.1 使用new VueRouter创建

const router = new VueRouter({
    routes
})

3.2 使用VueRouter.createWebHashHistory创建(Vue 3)

const router = VueRouter.createRouter({
    history: VueRouter.createWebHashHistory(),
    routes
})

4.创建并挂载根实例

如果是vue-cli搭建的项目，在router的js文件中，已经导出router实例：

export default router

并在main.js注入：

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

如果是单纯的html文件中的script脚本：

通过调用app.use(router) 可以在任意组件中以this.$router的形式访问路由根实例，并以this.$route的形式访问当前路由实例。

const app = Vue.createApp({});
app.use(router);
app.mount('#app');

一般都是vue-cli搭建的项目，所以这一步基本不用操作。

this.$router与直接使用通过createRouter创建的router实例完全相同，使用this.$router的原因是避免在每个需要操作路由的组件中重复导入路由。