11-Vue：路由（2）

1.声明式导航–跳转传参

在跳转路由时，可以给路由对应得组件内传值；
在router-link上得to属性传值，语法：

/path?参数名=值
/path/值–需要对路由对象提前配置 path:‘/path/:参数名’

对应页面组件接收传递过来得值：

$route.query.参数名
$route.params.参数名

1：Home.vue中书写router-link组件 ，传递参数

<router-link to="/detail?user=妞妞">hello--妞妞</router-link>

<router-link to="/mydetail/贝贝">hello--贝贝</router-link>

2：路由配置

const routes = [
  {
    path: '/detail',
    component:Detail
  },
  {
    path: '/mydetail/:users',
    component:Detail
  },
 ]

3：Detail.vue组件中接收参数

<script>
export default {
  created() {
    //可以操作data中的数据
    console.log(this.$route.query)
  },
}
</script>

//MyDetail.vue
<script>
export default {
  created() {
    console.log(this.$route.params)  //{users: '贝贝'}
  },
}
</script>

2.路由模式设置

修改路由在地址栏的模式
hash路由 http://localhost:8080/#/home 默认
history路由 http://localhost:8080/home （上线需要服务端支持，否则找的是文件夹）

3.编程式导航

使用js代码实现路由跳转

//语法
this.$router.push({
  path:"路由地址"，
  name:"路由名"
})

1：路由规则中，给路由起名字

const routes = [
  {
    path: '/home',   //路由地址
    // redirect:'/find',
    name:"home",  //给路由起名字
    component:Home
  },
  {
    path: '/part',   //路由地址
    name:'part',
    component:Part
  },
  {
    path: '/find',   //路由地址
    name:'find',
    component:Find
  },
  ]

2:组件中跳转 Find.vue

<template>
  <div>
    <p @click="tzHome">首页</p>
  </div>
</template>

<script>
export default {
  methods: {
    tzHome() {
      // this.$router.push('/home')

      this.$router.push({
        name: 'home',
        // path: '/home',
      })

      // 注意：虽然用name跳转，但是url的hash值还是切换path路径值
    },
  },
}
</script>

4.编程式导航–跳转传参

this.$router.push({
   path:"路由路径"，
   name:"路由名",
   query:{
     "参数名":值
   },
   params:{
     "参数名":值
   }
})

对应的路由接收  $route.query.参数名 
              $route.params.参数名 

<template>
  <div>
    <p @click="toDetail">hello-妞妞</p>
    <p @click="toMydetail">hello-我的贝贝</p>
  </div>
</template>

<script>
export default {
  methods: {
    toDetail() {
      this.$router.push({
        path: '/detail',
        query: {
          user: 'hello',
        },
      })
    },
    toMydetail() {
      // path会自动忽略params
      this.$router.push({
        name: 'mydetail',
        params: {
          users: 'hello贝贝',
        },
      })
    },
  },
}
</script>

5.嵌套路由

在现有的一级路由下，再嵌套二级路由
1:创建需要用的所有组件

src/views/Find.vue 发现音乐

src/views/My.vue 我的音乐

src/views/second/Recommend.vue 发现音乐/推荐页面

src/views/second/Ranking.vue 发现音乐/排行榜页面

src/views/second/SongList.vue 发现音乐/歌单页面

2：router.js中配置二级路由

3：App.vue中写router-view实现发现音乐和我的音乐的切换

​ Find.vue中写router-view实现Recommend.vue，Ranking.vue，SongList.vue的切换