准备:电脑已安装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了。