vue-router的初学使用

291 阅读1分钟

对于路由的学习使用:

首先打开一个vue文件,然后在终端(Terminal)通过命令:npm install vue-router --save-deva

来下载路由的包,这样后面才可以调用路由。

然后在组件包(compontent)里创建vue组件,我创建了一个Content.vue和Main.vue。

然后一般来说,在src目录下创建一个路由包(我命名为router),在里面创建一个js文件,建议命名为index.js,这时文件是空的。

现在先返回main.js中配置:import router from './router' 

./router就是从上面的路由包里导入,同时在下面引入router:

这是引入配置,然后回到路由包下的Index.js中,首先日常导入

先与主文件连接:import Vue from 'vue'

然后与vue的路由包连接上:import VueRouter from 'vue-router'

然后与组件连接上,上面建的组件:import Content from '../components/Content'

import Main from '../components/Main'

接下来是安装路由了:Vue.use(VueRouter);

然后是配置导出路由:

这样路由就基本写好了,然后在组件文件里的 <template> 里写代码

调用的话就在App.vue里写:

然后在终端(Terminal)中命令:npm run dev

就可以运行了。