Vue3（撩课学院）笔记07-vueRouter路由，创建路由，路由重定向，路由跳转，动态路由，路由懒加载，路由嵌套，路由参数穿传递的两种形式，通过事件来跳转路由

1、vueRouter路由的两种模式

哈希模式：以#号分割，前端路由一般用hash模式比较多，可以兼容ie8以上，井号后面不发起请求
历史模式：putstate（）和replaceState()方法入栈出栈，兼容ie10以上

2、安装vueRouter4

npm install vue-router@4

3、创建路由

创建路由js文件
1、在根目录下创建路由目录，并创建index.js，在里面编写业务逻辑
2、路由映射表,createWebHashHistory是创建历史模式的路由
3、引入页面组件
4、创建路由
5、导出路由

// 1、路由映射表,createWebHashHistory是创建历史模式的路由
import {
   createRouter,createWebHashHistory,createWebHistory} from 'vue-router'

//2、引入页面组件
import Home from '../components/Home.vue'
import Mine from '../components/Mine.vue'

//3、创建路由对象
const routes=[
  {
   path:'/home',component:Home},
  {
   path:'/mine',component:Mine}
]

//4、创建路由
const router=createRouter({
   
  history:createWebHashHistory(),//设置路由方位方式
  routes
})

//5、导出路由
export default router

在main.js中引入这个路由
1、从路由js文件中引入如有
2、使用app.use使用路由

import {
    createApp } from 'vue'
import App from './App.vue'

//引入路由对象
import router from './Router/index.js'

const app=createApp(App)
//使用路由
app.use(router)
app.mount('#app')

在具体的vue文件中使用路由
标签对建立导航
标签对，建立页面展示

<template>
<div>
  <!-- 导航 -->
    <div id="nav">
      <router-link to="/home">首页</router-link>
      <router-link to="/mine">我的</router-link>
    </div>
  <!-- 路由出口 -->
    <router-view></router-view>
</div>

</template>

<script >
  export  default {
   
    setup (props,context){
   
      return {
   
      }
    }
  }

</script>

<style>
</style>

4、使用路由重定向默认根路径访问

使用redirect进行重定向

{
   path:'/',redirect:'/home'},

//3、创建路由对象
const routes=[
//路由重定向
{
   path:'/',redirect:'/home'},  		    			  {
   path:'/home',component:Home},
{
   path:'/mine',component:Mine}
]

5、router-link常用属性active-class

active-class：添加一个激活的样式

<div id="nav">
      <router-link to="/home" active-class="current">首页</router-link>
      <router-link to="/mine">我的</router-link>
    </div>

此外，router-link有一个默认的选中的样式类
.router-link-active{
font-size：18px；
color：goldenrod；
font-weight：bolder
}

6、router-link常用属性replace

replace重新替换一个栈，而不会有缓存

<div id="nav">
      <router-link to="/home" replace>首页</router-link>
      <router-link to="/mine" replace>我的</router-link>
    </div>

7、js实现路由跳转

步骤
1、通常要绑定事件
2、引入vue-router
3、导入自定义的路由对象router
4、push到具体的url地址上去
5、也可以是用replace

 router.push('/home')

const home=()=>{
   
        // router.push('/home')
        router.replace("/home")
      }

8、动态路由$route.params

• 如新闻详情页就是动态路由（路径）
• 动态路由通过id来绑定动态路径，需要冒号：id
• 访问动态路由的时候也需要带/id才能访问到如：http://localhost:3000/#/news/001
• 父组件的动态id可以在子组件中通过$route.params来获取

<p>新闻的id{
   {
   $route.params}}</p>

子组件也可以通过导入useRoute来获取动态路由id，useRouter.params.id

<template>
  <div id="news">
    <div>新闻详情</div>
    <p>新闻的id{
   {
   $route.params.id}}</p>
  </div>
</template>

<script>
  import {
   useRoute} from 'vue-router'
  export default