zoukankan      html  css  js  c++  java
  • vue路由

     

    1.安装路由

        第一种方式  vue add router 

        第二种方式  npm i vue-router --save

    2.路由

    第一种 通过path
    
    <router-link to="/a">pageA</router-link>
    
     <router-link to="/b">pageB</router-link>
    
     <router-view/>
    
    第二种  通过name
    
    <router-link :to="{name:'pageA'}">pageA</router-link>
    
    <router-link :to="{name:'pageB'}">pageB</router-link>
    
    <router-view/>

    4.动态路由(可以携带一些参数)

      例如:localhost:8080/a/123?name="lwq"

    ​  在this.$route中

    ​     fullpath是 路径+查询的参数 /a/123?name="lwq"

    ​     path就只是路径 /a/123

    ​     params: {id:123}

    ​     query:查询的参数 {name:"lwq"}

    5.参数属性传递

    这里以id为例
    router.js { path:"/b/:id", name:'pageB', props:true, //设为true在vue页面可以直接访问id component:pageB } pageB.vue
    <template <div> this is B; {{id}} </div> </template> <script> export default { props:['id'] } </script>

    6.嵌套路由

    router.js
    {
          path:'/a',
          name:'pageA',
          component:pageA,
          children:[
            {
              path:'test',
              component:test
            }
          ]
     }

    7.命名视图

    router.js
    {
          path:'/a',
          name:'pageA',
          components:{
            default:pageA,
            divid:test
          }
    }
    
    app.vue 
      <router-view/>
      <router-view name="divid" />
  • 相关阅读:
    第3章 MFC框架程序剖析
    第2章 掌握C++
    第1章 Windows程序内部运行机制
    【MFC】画线
    使用RegSetValueEx修改注册表时遇到的问题(转)
    读书笔记
    POJ 1182[并查集]
    读书笔记
    HihoCoder 1532 : 最美和弦
    HihoCode 1531 : 德国心脏病
  • 原文地址:https://www.cnblogs.com/Alaic2052243080/p/12731173.html
Copyright © 2011-2022 走看看