Vant添加路由
转载声明：
本文为摘录自“简书”，版权归原作者所有。
温馨提示：
为了更好的体验，请点击原文链接进行浏览
摘录时间：
2020-11-09 16:55:04
根据Vant官方QuickStart我搭建了一个能访问主页的程序
# ①安装 Vue Cli，我省略了这一步，因为我之前就安装好了
npm install -g @vue/cli
# ②创建一个项目，之所以在本地创建，是因为我需要用git管理它
vue create .
# ③创建完成后，可以通过命令打开图形化界面添加Vant依赖，官方QuickStart有图片指南
vue ui
# ④安装自动引入组件的插件
npm i babel-plugin-import -D
做完这些，你就可以访问到一个主页了
# 启动
yarn serve
默认首页截图.jpg
但是，还缺少路由模块。
路由模块
- 可以在刚才打开的vue ui继续添加vue-router，也可以执行以下命令安装。
npm install vue-router
- 添加路由配置文件
mkdir src/router/ && cd src/router && touch index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import HelloWorld from './../components/HelloWorld'
import Test from './../components/Test'
Vue.use(VueRouter)
export default new VueRouter({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/test',
name: 'Test',
component: Test
}
]
})
- 修改main.js文件
import Vue from 'vue'
import App from './App.vue'
import router from './router/index' //新增
Vue.config.productionTip = false
new Vue({
el: '#app', //新增，这里的app是在App.vue文件中定义的ID
router, //新增
render: h => h(App),
}).$mount('#app')
- 修改App.vue文件的template
<template>
<div id="app">
<router-view /> //这里特别需要注意，需要加一个这个标签
</div>
</template>
Test页面访问截图.jpg
参考
