vue2.0 路由传参(router-link传过去)
路由 Router Link 传参 过去 Vue2.0
2023-09-27 14:26:17 时间
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../vue2.2.js"></script>
<script src="../vue-router2.1.js"></script>
</head>
<body>
<div id="app">
<p>
<router-link to="/user/01">QQ登录</router-link>
<router-link to="/user/02">微信登录</router-link>
</p>
<router-view></router-view>
</div>
<script>
/*一个路径参数使用冒号:标记.当匹配到一个路由时,参数值会被设置到this.$route.params,
可以在每个组件内使用.于是,我们可以更新User模板,输出当前的Id*/
var User = {
template: `<div>User {{$route.params.id}}</div>`
}
const router = new VueRouter({
routes: [{
path: "/user/:id",
component: User
}]
})
const vm = new Vue({
router //router:router
}).$mount("#app")
</script>
</body>
</html>
相关文章
- Dubbo源码解析实战 - 路由Router的奥秘
- Flask路由报错:raise FormDataRoutingRedirect(request)
- Javascript实现前端简单路由
- 01-路由跳转 安装less this.$router.replace(path) 解决vue/cli3.0语法报错问题
- Vue3基础(21)___在axios.js中使用路由跳转
- ASP.NET WebApi 路由配置
- PHP中的自定义路由使用小结
- Tp3.2 自定义路由
- 无敌的路由分发
- ES学习之分片路由
- React | React Router 路由切换原理
- 路由控制
- Vue笔记——vue-router路由(狂神)
- AngularJS ui-router (嵌套路由)
- Windows路由表配置:双网卡路由分流
- HCIP-6.4BGP数据库及通告路由的方式
- vue3 添加路由vue-router
- ASP.NET Web API路由系统:Web Host下的URL路由
- 2、新H3C杯——静态路由实验(练习)
- director.js:客户端的路由---简明中文教程
- 我们要的是一个简单的react-router路由
- 前端路由实现及 react-router v4 源码分析
- react-router 4.x 路由按需加载
- 前端路由实现与 react-router 源码分析
- Vue路由(vue-router)详细讲解指南
- Vue从入门到精通——第六章 路由vue-router
- 三十一、python学习之Flask框架(三)视图:路由、上下文、Flask-Script扩展