vue 安装路由模块详解

看的网上的视频根据自己的实际情况总结的,也参考了别人的总结:

安装路由模块:

1.本地环境安装路由插件vue-router:
  npm install vue-router --save -dev   

2.在main.js中导入vue-router:
  2.1import Router233 from 'vue-router'  //Router233 这个路由包名自定义就行,不过要和后面用到的保持一致

  2.2 Vue.use(Router233)
  2.3//配置路由
  const router = new Router233({
    routes:[
//routes里自行设置,component:xxx  这里的xxx 就是我们的组件名,例如我这的Home/HelloWorld

需要我们在前面先导入

//import HelloWorld from './components/HelloWorld'
//import Home from './components/Home',

      {path:"/",component:Home},
      {path:"/helloworld",component:HelloWorld}
    ],
    mode:"history" //
    })
  2.4//在 new Vue({}) 中加上 router :
  new Vue({
    router,//使用路由
  )}

3.在App.vue 中的html 中 加上 router-view(展示路由):

<!--1模板:html结构-->
<template>
  <!-- 有且只有一个根标签   例如: <div id="app">-->
  <div id="app">
    <router-view></router-view>
  </div>
</template>

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值