vue3的路由

1.路由器 router

路由组件放在views或pages文件夹下，一般组件放在components文件夹下
切换路由后，只有当前激活的路由组件为挂载状态，其他路由组件是销毁状态

• 由路由工作模式history和路由规则routes组成
• 路由规则会有一个redirect属性，符合当前路由时，重定向到其他路由

import { createRouter, createWebHistory,createWebHashHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(),  //工作模式
  routes: [
    {
      path: '/login',
      name: 'login',
      component: Login
    }
  ]
})
export default router

2.路由工作模式

• hash
  • 优点：兼容性强
  • 缺点：url中带有#，不美观，SEO优化方面相对较差
• history
  • 优点：url美观
  • 缺点：部署上线，需要服务端配置处理路径
  • nginx服务配置：
    

3.路由插入位置

• 使用RouterView标记

4.路由跳转组件

RouterLink 页面跳转默认是push模式，加上属性replace，为替换模式

• RouterLink

// 第一种写法：字符串式
<router-link to="/home" active-class="selectStyle"></router-link>
// 第二种写法：对象式
<router-link :to="{path:'/home'}" active-class="selectStyle"></router-link>
<router-link :to="{name:'home'}" active-class="selectStyle"></router-link>   // 命名路由

5.路由传参

query传参

• 传递参数

// 第一种写法：字符串式
<router-link to="/detail?a=123" active-class="selectStyle"></router-link>
// 第二种写法：对象式
<router-link :to="{path:'/detail',query:{a:123}}" active-class="selectStyle"></router-link>
<router-link :to="{name:'detail',query:{a:123}}" active-class="selectStyle"></router-link>   // 命名路由

• 接收参数

 <div>{{route.query.a}}</div>
 
import {useRoute} from 'vue-router'
let route= useRoute()  // route是一个proxy对象

params传参

1.参数需要在路由规则中提前占位;
2.参数不支持数组，对象格式;
3.跳转时需要使用命名路由方式跳转（路由中的name配置项）;
4.参数非必传是后面加?; path: ‘/detail/:a?’

• 参数需要在路由规则中提前占位，如a

	{
      path: '/detail/:a',
      name: 'detail',
      component: Detail
    }

• 传递参数

// 第一种写法：字符串式
<router-link to="/detail/123" active-class="selectStyle"></router-link>
// 第二种写法：对象式
<router-link :to="{name:'detail',params:{a:123}}" active-class="selectStyle"></router-link>
<router-link :to="{name:'detail',params:{a:123}}" active-class="selectStyle"></router-link>   // 命名路由

• 接收参数

 <div>{{route.params.a}}</div>
 
import {useRoute} from 'vue-router'
let route= useRoute()  // route是一个proxy对象

6.路由的props配置

• 写法一：

将路由收到的所以params参数当成props属性传递给路由组件，路由组件就可通过defineProps接收

	{
      path: '/detail/:a',
      name: 'detail',
      component: Detail,
      prop:true
    }

• 写法二：

函数式默认有参数route,可以自己决定把那些数据作为props属性传递给路由组件

	{
      path: '/detail/:a',
      name: 'detail',
      component: Detail,
      prop(route){
      	return route.query
      }
    }

• 写法三（对象写法，无法动态，仅了解）：

	{
      path: '/detail/:a',
      name: 'detail',
      component: Detail,
      prop:{
      	a:100
      }
    }

7.编程式导航

useRouter，与to的写法是一样的,

import {useRouter} from 'vue-router'
const router = useRouter()
router.push('/login')  // 字符串写法
router.push({path:'/detail',query:{a:123}})  //对象写法