• vue-router参数


    一、通过路由name属性给导航传参

    红色字体为增改内容!!!

    1、新建src/router.js

    2、src/main.js  

    //导入vue和新建的router.js   
    import Vue from 'vue'
    import router from './router.js'

    3、src/router.js

    //导入vue和vue-router
    import Vue from 'vue'
    import VueRouter from 'vue-router'
     
    //使用vue-router(名称为VueRouter,可以随便取)
    Vue.use(VueRouter)
     
    //定义组件模板内容
    const first = {template:'<div>这是first内容</div>'}
    const second = {template:'<div>这是second内容</div>'}
    const Home = {template:'<div>这是Home内容</div>'}
     
    const firstFirst = {template:'<div>这是firstFirst内容</div>'}
    const firstSecond = {template:'<div>这是firstSecond内容</div>'}
    const sld={
    template:`
    <div class="sld">
    <h2>二级组件</h2>
    <router-view class="abc"></router-view>
    </div>
    `
    }
    //定义组件路径
    const router = new VueRouter({
    mode:"history",
    base:__dirname,
    routes:[          //routes
    {path:"/",name:"Home",component:Home},
    {path:"/first",component:sld,
    children:[
    {path:"/",name:"Home-first",component:first},
    {path:"first",name:"Home-first-first",component:firstFirst},
    {path:"second",name:"Home-first-second",component:firstSecond}
    ]
    },
    {path:"/second",name:"Home-second",component:second}
    ]
    })
     
    //使用组件
    new Vue({
    router,
    template:`
    <div id="r">
    <p>{{$route.name}}</p>
    <ul>
                   //router-link to=“指向的组件路径”
    <li><router-link to="/">/</router-link></li>                 
    <li><router-link to="/first">first</router-link>
    <ul>
    <li><router-link to="/first/first">first</router-link></li>
    <li><router-link to="/first/second">second</router-link></li>
    </ul>
    </li>
    <li><router-link to="/second">second</router-link></li>
    </ul>
    <router-view class="abc"></router-view>          
           //router-view组件显示区域
    </div>
    `
    }).$mount("#app")        //组件挂载(index.html中定义的div的id为app)
     

    4、运行npm run dev,页面显示效果为


    二、router-link to给子模版组件里传参

    红色框为增改内容!!!

    const firstFirst = {template:'<div>这是firstFirst内容 {{ $route.params.id }} </div>'}
    const firstSecond = {template:'<div>这是firstSecond内容 {{ $route.params.id }}</div>'}
    <li><router-link :to="{name:'Home-first-first',params:{id:111111}}">first</router-link></li>
    <li><router-link :to="{name:'Home-first-second',params:{id:222222}}">second</router-link></li>

     注:使用params时,和name搭配;

            使用query时,和path搭配,例子如下:

     1 import Vue from 'vue'
     2 import VueRouter from 'vue-router'
     3 Vue.use(VueRouter)
     4 
     5 const Home = {template:'<div>这是Home内容</div>'}
     6 const users={
     7     template:`
     8     <div class="sld">
     9         <h2>users</h2>
    10         <router-view></router-view>
    11     </div>
    12 `
    13 }
    14 const user={
    15     template:`
    16     <div class="sld">
    17        {{$route.params.username}} - {{$route.query.aaa}}
    18     </div>
    19 `
    20 }
    21 
    22 const router = new VueRouter({
    23     mode:"history",
    24     base:__dirname,
    25     routes:[
    26         {path:"/",name:"Home",components:Home},
    27         {path:"/users",component:users,
    28             children:[
    29                 {path:":username",name:"user",component:user}
    30             ]
    31         }
    32     ]
    33 })
    34 
    35 new Vue({
    36     router,
    37     template:`
    38         <div id="r">
    39             <ul>
    40                 <li><router-link to="/">/</router-link></li>
    41                 <li><router-link to="/users">users</router-link>
    42                     <ul>
    43                         <li><router-link :to="{path:'/users/gujing123',query:{aaa:'bbb'}}">gujing1</router-link></li>
    44                     </ul>
    45                 </li>
    46             </ul>
    47             <router-view class="abc"></router-view>
    48            </div>
    49     `
    50 }).$mount("#app")

     

  • 相关阅读:
    Yii2的深入学习--行为Behavior
    使用WordPress搭建自己的博客
    php-resque的设计和使用
    PHP的学习--在Atom中使用XDebug(Mac)
    七牛镜像的使用
    macOS平台下虚拟摄像头的研发总结
    macOS下利用dSYM文件将crash文件中的内存地址转换为可读符号
    XCode日常使用备忘录
    DirectShow Filter的开发实践
    Windows下程序启动时出现0xc000007b错误的解决方案
  • 原文地址:https://www.cnblogs.com/yijisi/p/11247871.html
Copyright © 2020-2023  润新知