Vue路由的使用

路由

• 什么是路由？

  • 路由是一种映射关系

• Vue的路由是什么？

  • 路径和组件的映射关系

• 什么是单页面应用？

  • 所有的业务都在一个页面编写，只有一个html

• 单页面的好处？

  • 开发效率高，一次加载所有组件，用户体验好

• 单页面应用如何切换页面？

  • 依赖路由切换显示

路由的基础使用步骤

1. 下载路由：npm i vue-router
2. 引入路由：import VueRouter from "vue-router"
3. 注册路由组件：Vue.use(VueRouter)
4. 创建路由规则：const routes = []
5. 根据路由规则生成路由对象： const router = new VueRouter({routes})
6. 把路由对象注入Vue实例：new Vue({router}).$mount('#app')
7. 路由挂载：router-view标签

• src/router/index.js

import Vue from 'vue'
// 1、下载路由 npm i vue-router@3
// 2、引入路由
import VueRouter from "vue-router";
// 3、注册全局组件
Vue.use(VueRouter)
    // 4、创建路由规则
const routes = [{
            path: "/",
            redirect: "/friend" //重定向，打开页面强制跳转到指定的页面
        },
        {
            path: "/find", //定义路由路径
            component: () =>
                import ("./views/find.vue"), //按需引入
            // 重定向到二级页面
            redirect: "/find/Recommend",
            // 二级导航
            children: [{
                    path: "Ranking",
                    component: () =>
                        import ("./views/Second/Ranking.vue")
                },
                {
                    path: "Recommend",
                    component: () =>
                        import ("./views/Second/Recommend.vue")
                },
                {
                    path: "SongList",
                    component: () =>
                        import ("./views/Second/SongList.vue")
                },
            ]
        },
        {
            path: "*",
            component: () =>
                import ("./views/NotFound.vue")
        }
    ]
 // 5、用规则生成路由对象
const router = new VueRouter({
    routes: routes,
    mode: "history" //切换路由模式
})

//导出路由
export default router

声明式导航

• 使用router-link标签和to属性
• router-link标签会被解析成a标签
• router-link标签自带高亮效果，激活会生成两个类名，分别是router-llink-active（模糊匹配）和router-link-exact-active（精确匹配）
• to属性：跳转传值

跳转传值

1、直接传值：to="/path？参数名=值"

2、间接传值：to="/path/值" ，然后给路由规则中的/path/:参数名

接收路由传值

1、直接传值：$route.query.参数名

2、间接传值：$route.params.参数名

编程式导航

• this.$router.push(路由地址)

<script>
export default {
  methods: {
    btn(){
      //query方式传值
      // this.$router.push({
      //   path:"/friend",
      //   // query:{
      //   //   id:123
      //   // }
      // })
      //params方式传值
      this.$router.push({
        name:"friend",
        params:{
          id:456
        }
      })
    }
  }
}
</script>