vue路由

Posted 2020-11-27 alaic2052243080

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" />