vue2.0 路由传参

<!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>

时间： 2024-10-14 17:15:47

vue2.0 路由传参的相关文章

vue2.0路由写法和传参

前置知识请戳这里 vue-routerCDN地址:https://unpkg.com/[email protected]/dist/vue-router.js vue-router下载地址:https://github.com/vuejs/vue-router/tree/dev/dist vue2.0路由基本写法 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title&

8.MVC框架开发（URL路由配置和URL路由传参空值处理）

1.ASP.NET和MVC的路由请求处理 1)ASP.NET的处理请求---------响应请求(HttpModule)--------处理请求(HttpHandler)--------把请求的资源处理之后返回给客户端 2)MVC的处理由ASP.NET衍生出来,也遵循请求.响应.处理.资源返回给客户端的过程请求-----URLRoutingModule(响应路由请求)-----RoutingTable(路由表)(检索请求路径是否和路由表里的路由匹配)-----生成一个路由映射,生成一个Ro

前端Vue框架 04 路由：逻辑跳转、路由传参项目组件的数据局部化处理data(){ return{} } 组件的声明周期组件间通信各种第三方插件(vuex,axios,element-ui,(jq+bs))

项目初始化 """ 1)根组件:App.vue <template> <div id="app"> <router-view /> </div> </template> 2)路由配置:router/index.js const routes = [ { path: '/', name: 'Home', component: Home } ]; 3)组件:views和components文件夹 i)

Vue2.0的变化(2)———vue2.0动画的变化、vue-2.0路由的变化

之前讲解的都是vue1.0的使用,现在我们开始介绍vue2.0,这里的介绍是在vue1.0的基础上进行介绍的,主要介绍的是同vue1.0版本相比2.0的变化 vue2.0动画的变化:现在变成: <transition> 运动东西(元素,属性,路由.....); </transition> class的定义: .fade-enter{} //初始状态 .fade-enter-active{} //变化成什么样 --当元素出来(显示) .fade-leave{} //可不写 .fade

vue2.0路由嵌套

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>vue2.0路由嵌套2</title> <script type="text/javascript" src="js/vue2.0.js" ></script> <script type="text/javascrip

vue2.0路由

现在用vue-cli搭建的环境里面vue-router是下载好的 vue2.0路由方式和以前也有些不同没了了map和start方法目录结构如上图这里有三个文件,app.vue显示,main.js控制路由,goods.vue为跳转页面 app.vue template> <div id="app"> <v-header></v-header> <div class="tab"> <div class=&

vue路由传参query和params的区别

1.用法 A.query要用path来引入(用name来引入也可以),接收参数都是this.$route.query.name. B.params要用name来引入,接收参数都是this.$route.params.name. 2.效果 A.query类似于ajax中get传参,即在浏览器地址栏中显示参数. B.params则类似于post,即在浏览器地址栏中不显示参数. 3.个人建议在路由传参上建议使用params,以隐藏参数,做好安全保密.

小程序路由传参的时候出现数据丢失

在写把操作的答案通过路由传参的形式传到下一个页面的时候,在下一个页面获取的时候数据被截取了解决办法使用 encodeURIComponent 进行加密然后再另外一个页面获取的时候使用 decodeURIComponent 进行解码这样就解决了路由传参时数据丢失的情况了原文地址:https://www.cnblogs.com/jeremy-o/p/9934468.html

vue-router和react-router-dom路由传参对照

React 1.动态路由传参 <Route exact path="/detail/:id" component={Detail}/> 接收 componentDidMount() { console.log(this.props.match.params); } 2.函数传参(push)加密的地址栏不可见 <button onClick={() => this.props.history.push({ pathname: '/detail', state: {