vue.js-路由
2024-10-21 07:50:30
1:编写router.js
import Router from "vue-router"
import Vue from "vue"
import router from "./router/router.vue" // 导入
import component from "./component/component.vue"
import databinding from "./databinding/databinding.vue"
import directive from "./directive/directive.vue"
import eventhanding from "./eventhanding/eventhanding.vue"
import stylebinding from "./stylebinding/stylebinding.vue"
import home from "./home.vue"
Vue.use(Router) // 引用
export default new Router({
linkActiveClass: 'active',
routes: [
{ path: '/component', component: component },
{ path: '/databinding', component: databinding },
{ path: '/directive', component: directive },
{ path: '/eventhanding', component: eventhanding },
{ path: '/stylebinding', component: stylebinding },
{ path: '/router/:userId', component: router }, // 路由传值
{ path: '/*', component: home }, // 找不到路由时跳转到这,一般设置为首页
]
})
2:在main.js中注册router
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App.vue'
import router from './router.js' //
Vue.use(ElementUI)
new Vue({
el: '#app',
router, // 注册router
render: h => h(App)
})
3:路由跳转传参
<el-button class="btnstyle" @click="routerClick">路由</el-button>
routerClick() { // 传入跳转的参数
const userId = 123456;
this.$router.push({
path: `/router/${userId}`
});
console.log("点击路由按钮");
},
4:接收路由参数
data() {
return {
text: this.$route.params.userId
};
},
最新文章
- CSS3--box-shadow
- NuGet学习笔记1——初识NuGet及快速安装使用
- NYOJ:题目860 又见01背包
- 【原创】【ViewPager+Fragment】ViewPager中切换界面Fragment被销毁的问题分析
- ZOJ 3778 Talented Chef(找规律,模拟计算,11届ACM省赛,简单)
- 《C++ Primer 4th》读书笔记 第5章-表达式
- CXF(2.7.10) - A simple JAX-WS service
- Android扫描SD卡中的文件
- 【Demo 0004】屏幕、窗体及视图基础知识
- 图的匹配问题与最大流问题(三)——最大流问题Ford-Fulkerson方法Java实现
- [.NET] 一步步打造一个简单的 MVC 电商网站 - BooksStore(四)
- 用过的关于css的知识
- 类模板语法知识体系梳理(包含大量常犯错误demo,尤其滥用友元函数的错误)
- windows server 2012/2016 设置多用户远程桌面(转载)
- hadoop 安装之 hadoop、hive环境配置
- 安全测试之sql注入
- Adobe Illustrator for Mac(矢量图处理软件)破解版安装
- Tomcat假死的原因及解决方案
- JDK7与JDK8中HashMap的实现
- Android 配置从GitHub上下载下来的不太规则的源代码库,并保证程序正常运行