typeAliases parameters swagger flowjs 郑州小程序公司 pmp视频教程下载 excel太长的文字隐藏 c语言求和 cad怎么重复上一次命令 python编程练习题 windows查看进程命令 python文件操作 python文件 linux配置python环境 java编程实例 java方法的重载 java环境部署 java字符串格式化 java文件输入输出 dll之家 七宗罪游戏下载 win10有哪些版本 js关闭当前页面 js跳出for循环 游戏linux正则表达式 网卡驱动安装包 ajaxpro jsp源代码 免费ftp空间 ps高手教程 linux系统下载 微信预约系统 主播音效 刻刀工具 top命令详解 趣学python编程 联表查询 企业路由器设置 urlpattern postgresql中文手册
当前位置: 首页 > 学习教程  > 编程语言

vue router安装和使用

2020/7/24 11:21:10 文章标签: 测试文章如有侵权请发送至邮箱809451989@qq.com投诉后文章立即删除

1.安装:npm install vue-router或cnpm install vue-router或yarn add vue-router

2.在新建router.js中引用如下代码
import Vue from ‘vue’
import VueRouter from ‘vue-router’
Vue.use(VueRouter)

3.在src中新建view文件夹,在view新建例如:Home文件夹,在文件夹中新建index.vue
在这里插入图片描述

export default {
name: “index”,
data(){
return{
}
},
components:{
Content,
},
methods:{
}
}

4、在router.js中设置如下两步
1、import Home from ‘./views/Home/’
2、export default new VueRouter ({
routes: [
{
path: ‘/’,
redirect: ‘/home’ //设置默认指向
},
{
path: ‘/home’,
component: Home
}
]
})
在这里插入图片描述

5、在App.vue中的div内引入

在这里插入图片描述

6、在main.js中 import router from ‘./router’
在new的实例中增加router,具体如下:
在这里插入图片描述
注意:多个页面时显示的还是默认路径的那个

tab切换
1.创建组件
在这里插入图片描述
2.在router.js中配置
在这里插入图片描述
3.在要显示标签的页面中输入在这里插入图片描述
注意:这里不要加/只在默认要下试试的那个加。


本文链接: http://www.dtmao.cc/news_show_50406.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?