vue-router从入门到精通（一）

最新推荐文章于 2024-04-20 08:26:00 发布

原创最新推荐文章于 2024-04-20 08:26:00 发布 · 424 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue-router #vue

vue-router 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍如何从零开始配置并使用 Vue Router。包括安装、配置路由、设置路由出口等六个步骤，帮助初学者快速掌握 Vue 路由管理。

准备：电脑已安装nodejs，在命令行输入node -v能输出版本号，我的是v8.9.4

我们使用vue-cli创建项目，如果不熟悉的话请移步vue-cli构建项目

当然，为了学习vue-router,我们在构建项目的时候是否安装vue的路由插件，选择no。

好了，开始我们的学习之旅吧！！！

vue-router的基本操作分为六步：

一：安装vue-router到生产环境，用到命令npm install vue-router --save

二、在src目录下新建router文件夹，在该文件夹内新建index.js文件

1.首先引入vue，import Vue from 'vue'

2.然后引入vue-router，import VueRouter from 'vue-router'

3.将VueRouter作为Vue的插件使用，Vue.use(VueRouter)

4.实例化一个VueRouter对象，将它暴露出去

let router = new VueRouter({
    routes: [
        {
            path: '/',
            component: home
        }
    ]
})

这里我们用到了home组件，当然，home组件中的内容先随便写写啦，因此我们需要将这个组件先引入进来，import home from '@/components/home'

export default router

这里我们将router暴露出去，注意一下：这里引入home时用到的'@'是自定义的一个路径，代表'src'，是在build/webpack.base.conf.js文件下的resolve处定义的

5.进入我们的入口文件，main.js处，我们需要将router注入到Vue的实例中去，注入之前我们当然需要引入啦，import router from './router'，Vue的实例中有一个router参数，对应我们引入的router即可，当然这里键值相同的话，我们可以简写成router

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router: router,
  components: { App },
  template: '<App/>'
})

6.到这里，我们就还差一个显示的地方（路由渲染出口），vue给我们预留了一个<router-view>组件用来显示我们路由对应的内容，打开App.vue文件

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

运行npm run dev之后，可以看到显示的是home中的内容，到这里，你已经会基本使用vue-router了。