Vue-Router路由框架

使用到Vue的项目，我们最常见使用的就是Vue配套的Vue Router库。
Vue-Router是Vue.js的官方路由

创建路由项目（ 创建vue-cli2项目，带vue-router）

电脑终端vue ui
选择项目路径，创建项目（项目名称只能小写字母，不能大写）
选择手动配置

可以不预设(如果预设了，会把这个项目当作模版，下次再创建时可以选择这个模版创建项目)

打开项目，可以直接运行
nom run serve

安装三方：
vue add axios (如果报错，设置vue.config.js的lintOnSave:false)
vue add element-ui

vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  lintOnSave:false,   //编辑器强检查
  transpileDependencies: true,
  productionSourceMap:false,   //暴露源代码
  outputDir:'betatest'   //打出的包的名称
})

#创建路由项目会自带路由配置代码

1. router的index.js：路由配置文件

import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'
Vue.use(VueRouter)

const routes = [
{
    path: '/home',
    name: 'home',
    component: HomeView  //导入文件路径，跳转会快些
  },
{
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')  //  这种写法是懒加载，跳转会慢些， ../是指相对当前文件的上一层目录（即：src）
  },
 {
    path: '/HelloWorld',
    name: 'HelloWorld',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '@/components/HelloWorld.vue')  //  @/是指src的绝对路径
  }
{
            path: "/",
            redirect: "find" //默认显示推荐组件(路由的重定向)
        },
      
        {
            path: "/find",
            name: "Find",
            component: Find,
            //二级路由
            children: [{
                    path: "/",
                    redirect: "recom" //默认显示推荐组件
                },
                {
                    path: "ranking", //注意二级路由的路径千万不要加/
                    component: Ranking
                },
            ]
        },
        {
            path: "/my",
            name: "My",
            component: My
        },
       
        {
            path: "*",
            component: NotFound //定义找不到已有组件时显示404
        },
    ]

//用规则生成路由对象
    // 创建路由对象并且传入规则
const router = new VueRouter({
    routes,
    mode: "history" //路由模式(默认为hash模式)
})

2. 挂载路由
   main.js

import router from "./router";

//把路由对象注入到new Vue实例中
new Vue({
    router, //导入路由对象
    render: h => h(App),
}).$mount('#app')

//用router-view作为挂载点, 切换不同的路由页面

3.使用路由
例如：
app.vue:

<template>
  <div id="app">
    <nav>
<!--       router-link： 路由跳转标签-->
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </nav>
    
<!--     <router-view/>: 路由占位，等同于<router-view></router-view>-->
    <router-view/>

  </div>
</template>

路由跳转：
this.$router.push(‘/find’)

#Vue-Router跳转方法
参考：https://blog.csdn.net/xiao_yu_liu/article/details/125003546
https://blog.csdn.net/sebeefe/article/details/126080415

1法、使用router-link
使用router-link标签，我们通常会使用到2个参数，最常用的就是to参数
to参数，表示你想要跳转到的路由对象
router-link标签，会调用router.push()方法，该方法会在你点击浏览器会退按钮的时候，无痕回退一个路由。

可以是路由路径
Home
Home

也可以是路由对象，甚至还可以为其携带参数
Home
User

Register

router-link好处 : 自带激活时的类名, 可以做高亮

在跳转路由时, 可以给路由对应的组件内传值
在router-link上的to属性传值, 语法格式如下 :
(方式一)
to=/path参数名=值
例：to=“/part?name=小明”
对应页面组件接收传递过来的值
this.$route.query.参数名接收参数数据：this.$route.query.name

(方式二)
to=“/path/值” (需在路由规则里配置/path/:参数名)
例：to=“/part/小王”
配置：path:“/part/:username”
对应页面组件接收传递过来的值 （注意动态参数需要用params接收）
this.$route.params.参数名接收参数数据：this.$route.params.username

2法、使用router-replace
设置 replace 属性的话，当点击时，会调用 router.replace()，而不是 router.push()，所以导航后不会留下历史记录。

方法1和2是使用html的方法来调用

3法、编程式-用JS代码来进行跳转
语法: path或者name任选一个, 传参query或者params
一、$ router 和 $ route的区别
$router : 是路由操作对象，只写对象
$route : 路由信息对象，只读对象

$router操作路由跳转this.$router.push({ name:‘hello’, query:{ username:‘word’, age:‘11’ } })
$route读取路由参数接收varname=this.$route.query.username;
s

路由配置里面设置路由路径时也可以带参数
const routes = [
{ path: ‘/users/:id’, component: User },
]
代码中的**id **字段，就是路径参数，当使用params的时候，就可以获取到。this.$router. params.id

通过params传参， path会忽略params 所以path不能和params一起使用
注意：这里使用name路由跳转方式路径不需要加 / 因为它只是个名字
this.$router.push(name:"Home",params:id:this.id)另一个页面接收:这里使用params传参就需要写params接收this.$route.params.id

通过query传参，path 和 name路由跳转方式，都可以用query传参
this.$router.push(path:"/Search",query://query是个配置项age:20)或者this.$router.push({
name:“Search”,
query:{ //query是个配置项
age:20
}
})
另一个页面接收
this.$route.query.age
query相当于GET请求，页面跳转的时候，可以在地址栏看到请求参数

总结：

1. query和params区别：
   query相当于GET请求，页面跳转的时候，可以在地址栏看到请求参数
   params相当于POST请求，参数不会在地址栏中显示
2. 使用path方式跳转路由 path会忽略params 所以path不能和params一起使用
   推荐使用name和params方式实现路由跳转
3. params传参，push里面只能是 name:‘xxx’,不能是path:‘/xxx’,因为params只能用name来引入路由，如果这里写成了path，接收参数页面会是undefined