学习笔记

前端路由VueRouter

安装依赖

// 最新版
npm install vue-router

// 3.x 版本 对应vue2
npm install vue-router@3 

// 4.x 版本 对应vue3
npm install vue-router@4

官网： https://router.vuejs.org/

基本使用

如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

使用方法

router-link 标签相当于超链接 a 标签

<template>
  <div id="app">
    <!-- 声明路由链接 --> 
    <router-link to="/discover">发现好音乐</router-link>
    <router-link to="/my"> 我的音乐 </router-link>
    <router-link to="/friends"> 关注 </router-link>

    <!-- 声明路由占位标签 -->
    <router-view></router-view>
  </div>
</template>

创建js文件

import VueRouter from "vue-router";
import Vue from "vue";
import Discover from "../components/Discover.vue";
import Friends from "../components/Friends.vue";
import My from "../components/My.vue";
import Toplist from "../components/Toplist.vue";
import Playlist from "../components/Playlist.vue";

Vue.use(VueRouter);

const router = new VueRouter({
  // 指定hash属性与组件的对应关系
  routes: [
    {
      path: "/",
      redirect: "/discover",
    },
    {
      path: "/discover",
      component: Discover,
    },
    {
      path: "/friends",
      component: Friends,
    },
    {
      path: "/my",
      component: My,
    },
    {
        path: "/discover/toplist",
        component: Toplist
    },
    {
        path: "/discover/playlist",
        component: Playlist
    }
  ],
});

// 默认导出 语法，核心作用是：将当前模块中名为 router 的对象 / 变量，作为模块的「默认对外暴露内容」，允许其他文件通过 import 语句直接引入使用。
export default router;

嵌套路由

在相关组件中也可以加入 router-link 标签 ，来嵌套路由

子路由可以简写，如下

    {
      path: "/discover",
      component: Discover,
      children: [
        {
          path: "toplist",
          component: Toplist,
        },
        {
          path: "playlist",
          component: Playlist,
        },
      ],
    },

之后在创建vue对象的js中也要导入并声明上边写的router/index.js

router/index.js 在import时可以省略index.js
router:router 属性名和值一样时也可以省略为router

import Vue from 'vue'
import App from './App.vue'
import router from "./router"
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  router: router,
}).$mount('#app')

动态路由

有多个商品时可以通过动态路由，就不需要写多个路由了

<template>
  <div>
    <h1>我的音乐</h1>
    <router-link to="/my/1">商品1</router-link>
    <router-link to="/my/2">商品2</router-link>
    <router-link to="/my/3">商品3</router-link>
    <router-view></router-view>
  </div>
</template>

router.js 中可以这样写，这样 id 就是一个变量了

{ path: '/product/:id',component:Product }

Product 组件页面也可以获取到这个id值

<template>
    <h3>商品 {{ $route.params.id }} </h3>
</template>