首页 > 其他分享 >vue-router路由

vue-router路由

时间:2022-12-09 14:35:39浏览次数:36  
标签:npm vue js 组件 router 路由

安装

先查看node_modules中是否存在vue-router

vue-router是一个插件包,所以我们还是需要用npm/cnpm来进行安装的,在第一个vue-cli文件下输入以下命令

npm install vue-router --save-dev

可能安装版本会不兼容,可安装下面的版本

npm install [email protected] --save-dev

如果在一个模块化工程中使用它,必须要通过Vue.use()明确地安装路由功能

我们在main.js中引入vue-router,并声明使用它

 然后在终端运行npm run dev照样可以跑起来

 

我们在components目录下定义一个Content.vue的组件,Main.vue组件

安装路由,在src目录下新建一个文件夹:router,专门存放路由

在main.js中配置路由

 

 在App.vue中使用路由

 

 npm run dev测试

 

 自我总结:

1.首先在components中自定义组件。

2.在router文件中的index.js中配置这个组件,定义路径,跳转组件

3.在main.js中配置2中的路由,index.js,此配置一经配置,往后加组件这里都可以不用再动

4.最后在App.vue中使用这个路由

标签:npm,vue,js,组件,router,路由
From: https://www.cnblogs.com/zhulei118/p/16968509.html

相关文章

  • vue fullcalendar日历拖拽插入整理
    <!--交易时间管理--><template><divclass="container"><Row><Colspan="6"><divclass="module-title">假期列表</div><divclass="......
  • vue3 使用vue3-video-play
    1.安装版本"vue3-video-play":"^1.3.1-beta.6",2.在main.ts中进行组件注册import{createApp}from'vue'importAntdfrom'ant-design-vue'importAppfrom'......
  • vue之vue-router路由
    vue-router简介:VueRouter是Vue.js官方的路由管理器。它和Vue.js的核心深度集成,让构建单页面应用变得易如反掌。包含的功能有:嵌套的路由/视图表模块化的、基于组件的路......
  • vue之element-ui
    注意:命令行都要使用管理员模式运行第一步:创建vue工程下面处理项目,创建安装依赖等,都是在命令行进行处理。创建一个工程(vue)vueinitwebpackvue安装依赖,我们需要安装vue-ro......
  • vue3 Vuex使用
    首先src下要有src\store\index.jsindex.js先引入creatStoreimport{createStore}from'vuex'exportdefaultcreateStore({state(){return{......
  • 基于Python+Django+Vue+MYSQL的社团管理系统
    OverridetheentrypointofanimageIntroducedinGitLabandGitLabRunner9.4.Readmoreaboutthe extendedconfigurationoptions.Beforeexplainingtheav......
  • Avue 在table表中悬浮显示数据
      <templateslot-scope="scope"slot="details"><el-popovertrigger="hover"placement="top"><!--客户名称、原数据、更新后数据-......
  • 原生开发小程序 和 wepy 、 mpvue 对比
    1.三者的开发文档以及介绍:原生开发小程序文档:​​点此进入​​​ wepy开发文档:​​​点此进入​​​ mpvue开发文档:​​​点此进入​​2.三者的简单对比:以下用一张图来......
  • vue 搜索框高亮
    核心代码keySign(title){lets=this.text;//搜索框的值(您要标红的关键字)varstr=title;//列表标题(原文本)//去除中间空格且字符之......
  • 第一个vue-cli程序
    什么是vue-clivue-cli官方提供的一个脚手架。用于快速生成一个vue的项目模板预先定义好的目录结构及基础代码,就好比在创建Maven项目时可以选择创建一个骨架项目......