Vant添加路由

来源:简书 分类: 文章浏览史 发布时间:2020-11-09 16:55:04 最后更新:2020-11-09 浏览:92
转载声明:
本文为摘录自“简书”,版权归原作者所有。
温馨提示:
为了更好的体验,请点击原文链接进行浏览
摘录时间:
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

但是,还缺少路由模块。

路由模块

  1. 可以在刚才打开的vue ui继续添加vue-router,也可以执行以下命令安装。
npm install vue-router
  1. 添加路由配置文件
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
        }
    ]
})
  1. 修改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')
  1. 修改App.vue文件的template
<template>
  <div id="app">
    <router-view /> //这里特别需要注意,需要加一个这个标签
  </div>
</template>
Test页面访问截图.jpg

参考

  1. Vant官方QuickStart
  2. vue-cli + vant 路由的设置
  3. 脚手架创建vant Vue项目
  4. 初来乍到-Vue+Vant+Vuex+Vue-router+less实现公司需求(一):换肤
php技术微信