vuecli3.0 配置vue-router

布满荆棘的人生 2023-06-15 09:49 287阅读 0赞

安装

直接在命令行打开项目目录然后输入以下代码进行安装

  1. npm install vue-router

配置路由

1.使用router-view标签设置路由显示层(一般会写在App.vue文件)在这里插入图片描述
2.配置routes（路由路径）
watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21laXMyNzQ2MQ_size_16_color_FFFFFF_t_70
index.js 控制文件

  1. import Vue from 'vue'    //引入vue
  2. import VueRouter from 'vue-router'    //引入vue-router模块
  3. import routes from './routes'    //引入路由配置文件(详见下方routes.js配置)
  4. Vue.use(VueRouter)    //声明安装路由
  6. export default new VueRouter({routes})    //返回实例

routes.js 路由配置文件

  1. //这里就可以引用你要显示的页面了
  2. import bindTel from '@/components/verification/bindTel.vue'
  3. import index from '@/components/HelloWorld.vue'
  5. //配置路由，path就是你浏览器地址，component就是跟着你要显示的页面，/表示默认地址。
  6. export default [
  7.     {path:"/",component:index},//主页
  8.     {path:"/bindTel",component:bindTel}//绑定手机号
  9. ]

引用路由

全都配置好之后在main.js下引用router文件，以及渲染到视图。

  1. import router from './router'    //引用router
  3. new Vue({
  4.   render: h => h(App),
  5.   router    //加到这里渲染到视图
  6. }).$mount('#app')

发表评论

表情：
评论列表 （有 0 条评论，287人围观）

还没有评论，来说两句吧...

相关阅读

    相关 vuecli4中配置服务器

    元气满满，直接干！ 在使用vuecli4开发项目时，如果需要自己开发服务器测试项目，单独编写一个服务器，非常难受！ 这时，我们可以在vuecli4中直接进行服务器 开发。过

    女爷i女爷i/ 0 赞/ 462 阅读