vue——路由

1.前端路由工作原理：

①用户点击了页面上的路由链接

②导致了URL地址栏中的Hash值发生了变化

③前端路由监听到了到Hash地址的变化

④前端路由把把当前Hash地址对应的组件渲染到浏览器

2.路由的安装以及配置

①在终端中输入下面命令：

npm i vue-router@3.5.2 -S

②在src源代码目录下新建router/index.js路由模块，并初始化如下代码：

//1/导入Vue和VueRouter的包
import Vue from "vue";
import VueRouter from "vue-router";
//2.调用Vue.use()函数，把VueRouter安装为Vue的插件
Vue.use(VueRouter);
//3.创建路由的实例对象
const router = new VueRouter({
  //是一个数组，作用是定义hash地址与组件之间的对应关系
  routes: []})
//4.向外共享路由的实例对象
export default router;

③将路由挂载到main.js中：

import Vue from "vue";
import App from "./App.vue";
//导入路由模块
import router from "@/router/index.js";
Vue.config.productionTip = false;

new Vue({
  render: (h) => h(App),
  router: router,
  //两者相同可以简写为router
}).$mount("#app");

④使用：只要在项目中安装了vue-router就可以使用router-view这个组件，它的作用就是一个占位符

<template>
  <div class="app-container">
    <h1>App2 组件</h1>

    <hr />
    <!--只要在项目中安装和配置了vue-router,就可以使用router-link替代掉a  -->
    <!-- 将<a href="#/home">首页</a>改为下面一行，其余也是一样 -->
    <router-link to="/home">首页</router-link>
    <router-link to="/movie/1">喜洋洋</router-link>
    <router-link to="/movie/2">美羊羊</router-link>
    <router-link to="/movie/3">懒洋洋</router-link>
    <router-link to="/about">关于</router-link>
    <!-- 只要在项目中安装和配置了vue-router，就可以使用router-view
    这个组件，作用：占位符 -->
    <router-view></router-view>
  </div>
</template>

3.嵌套路由：通过路由实现组件的嵌套展示

通过children属性声明子路由规则，在上一级展示的页面中声明children属性

{
      path: "/about",
      component: About,
      children: [
        //通过children属性，嵌套声明子级路由规则
        { path: "", component: Tab1 },
        { path: "tab1", component: Tab1 }, //访问/about/tab1时，展示Tab1
        { path: "tab2", component: Tab2 }, //访问/about/tab1时，展示Tab1
      ],
    },

4.动态路由：是指把hash地址中可变的部分定义为参数项，从而提高路由规则的复用性，在vue-router中使用英文冒号：来定义路由的参数项：

//id是参数，自己定义的
 { path: "/movie/:id", component: Movie },

注意：是在自己创建的router文件夹下的index.js中使用

5.可以用个props给路由规则传参

 { path: "/movie/:id", component: Movie, props: true },

注意：

①在hash地址中，/后面的参数项叫做路由参数”

②在hash地址中，？后面的参数项叫做“查询参数”

③在this.$route中，path只是路径部分，fullpath是完整的地址