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 {name: 'News',setup(){const router=useRoute()console.log(router)console.log(router.params.id)}}
</script>

案例

<template>
<div><!-- 导航 --><div id="nav"><router-link to="/home" replace>首页</router-link><router-link to="/mine" replace>我的</router-link><router-link :to="'/news/' + newsId " replace>新闻</router-link></div><!-- 路由出口 --><router-view></router-view></div></template><script >import {useRouter} from 'vue-router'import router from './router/index.js' //从router文件夹中取值。实际上就是导入的router/index.jsimport {ref} from 'vue'export  default {setup (props,context){const newsId=ref('fr001')return {newsId}}}</script>

9、路由懒加载

组件在路由访问的时候才加载，而不是一开始就加载，从而更加高效
路由index文件

//路由懒加载
const Home=()=>import('./../components/Home.vue')
const Mine=()=>import('./../components/Mine.vue')
const News=()=>import('./../components/News.vue')

案例

// 1、路由映射表,createWebHashHistory是创建历史模式的路由
import {createRouter,createWebHashHistory,createWebHistory} from 'vue-router'//2、引入页面组件
// import Home from './../components/Home.vue'
// import Mine from './../components/Mine.vue'
// import News from './../components/News.vue'//路由懒加载
const Home=()=>import('./../components/Home.vue')
const Mine=()=>import('./../components/Mine.vue')
const News=()=>import('./../components/News.vue')//3、创建路由对象
const routes=[{path:'/',redirect:'/home'},{path:'/home',component:Home},{path:'/mine',component:Mine},//动态路由，动态绑定id，要使用冒号：{path:'/news/:id',component:News}
]//4、创建路由
const router=createRouter({history:createWebHashHistory(),//设置路由方位方式routes
})//5、导出路由
export default router

10、路由嵌套

多级路由，如news/beijing/xxxx
步骤

1、创建多个二级组件（vue文件）
2、router的index.js编写二级路由的逻辑。使用children创建二级路由

children:[{path:'xx',component:xxx}
]

3、在父级组件中使用这个二级组件

<div class="content-nav"><router-link to="/mine/msg">我的消息</router-link><br/><router-link to="/mine/order">我的订单</router-link></div><router-view class="content-list"></router-view></div><MineMsg></MineMsg>

案例：

1、MineOrder.vue MinMsg.vue

<template><div id="mine_Order">我的订单</div>
</template><script>export default {name: 'MineOrder'}
</script>

<template><div id="mine_msg">我的消息</div>
</template><script>export default {name: 'MineMsg'}
</script>

2、/router/index.js

// 1、路由映射表,createWebHashHistory是创建历史模式的路由
import {createRouter,createWebHashHistory,createWebHistory} from 'vue-router'//2、引入页面组件
import Home from './../components/Home.vue'
import Mine from './../components/Mine.vue'
import News from './../components/News.vue'
import MineMsg from './../components/MineMsg.vue'
import MineOrder from './../components/MineOrder.vue'//3、创建路由对象
const routes=[{path:'/',redirect:'/home'},{path:'/home',component:Home},//含有二级路由,不需要加斜杠{path:'/mine',component:Mine,children:[{path:'/mine',redirect:'/mine/msg'},{path:'msg',component:MineMsg},{path:'order',component:MineOrder},]},//动态路由，动态绑定id，要使用冒号：{path:'/news/:id',component:News}
]//4、创建路由
const router=createRouter({history:createWebHashHistory(),//设置路由方位方式routes
})//5、导出路由
export default router

3、Mine.vue父组件

<template><div id="mine"><h2>我的</h2><div class="content"><div class="content-nav"><router-link to="/mine/msg">我的消息</router-link><br/><router-link to="/mine/order">我的订单</router-link></div><router-view class="content-list"></router-view></div><MineMsg></MineMsg></div>
</template><script>import MineMsg from './MineMsg.vue'export default {name: 'Mine',components: { MineMsg }}
</script>

11、路由参数传递-params

动态路由路径为：/router/：params
传递方式为在path后面跟上传递的参数
传递后形成的路径：/router/lk001

12、路由参数传递-query

路由格式：/router
传递方式，在对象中使用query的key作为传递方式
传递后形成的路径/router?id=lk001
以上两个知识点案例
app.vue

<template>
<div><!-- 导航 --><div id="nav"><router-link to="/home" replace>首页</router-link><router-link to="/mine" replace>我的</router-link><router-link :to="'/news/' + newsId " replace>新闻</router-link><router-link to="/circle" >圈子parmas</router-link><!-- 直接传参 --><router-link :to="{path:'circle',query:{name:'sina',site:'www.sina.com.cn'}}" >圈子query</router-link><!-- 通过query绑定对象来传递 --></div><!-- 路由出口 --><router-view></router-view></div></template><script >import {useRouter} from 'vue-router'import router from './router/index.js' //从router文件夹中取值。实际上就是导入的router/index.jsimport {ref} from 'vue'export  default {setup (props,context){const newsId=ref('fr001')return {newsId}}}</script><style>.router-link-active{font-size:18px;color:goldenrod;font-weight:bolder}
</style>

index.js引入模块及配置路由

// 1、路由映射表,createWebHashHistory是创建历史模式的路由
import {createRouter,createWebHashHistory,createWebHistory} from 'vue-router'//2、引入页面组件
import Home from './../components/Home.vue'
import Mine from './../components/Mine.vue'
import News from './../components/News.vue'
import MineMsg from './../components/MineMsg.vue'
import MineOrder from './../components/MineOrder.vue'
import Circle from './../components/Circle.vue'
//3、创建路由对象
const routes=[{path:'/',redirect:'/home'},{path:'/home',component:Home},//含有二级路由,不需要加斜杠{path:'/mine',component:Mine,children:[{path:'/mine',redirect:'/mine/msg'},{path:'msg',component:MineMsg},{path:'order',component:MineOrder},]},//动态路由，动态绑定id，要使用冒号：{path:'/news/:id',component:News},{path:'/circle',component:Circle},
]//4、创建路由
const router=createRouter({history:createWebHashHistory(),//设置路由方位方式routes
})//5、导出路由
export default router

circle.vue模板页

<template><div id="circle">圈子<p>{{$route.query.site}}</p><p>{{$route.query.name}}</p></div>
</template><script>import {useRoute} from 'vue-router'export default {name: 'Circle',setup(){let route=useRoute()//获得当前路由console.log(route.query)}}
</script><style scoped>
#circle{width: 400px;height: 600px;background-color: cadetblue;
}
</style>

两个不同的地址栏表现形式

http://localhost:3000/#/circle
另一个
http://localhost:3000/#/circle?name=sina&site=www.sina.com.cn

13、通过事件来跳转路由

app.vue

<template>
<div><!-- 导航 --><div id="nav"><router-link to="/home" replace>首页</router-link><router-link to="/mine" replace>我的</router-link>
<!--      <router-link :to="'/news/' + newsId " replace>新闻</router-link>-->
<!--      <router-link to="/circle" >圈子parmas</router-link>&lt;!&ndash; 导航 &ndash;&gt;-->
<!--      <router-link :to="{path:'circle',query:{name:'sina',site:'www.sina.com.cn'}}" >圈子query</router-link>&lt;!&ndash; 通过绑定对象来传递 &ndash;&gt;--><button @click="news()">新闻</button><button @click="circle()">圈子</button></div><!-- 路由出口 --><router-view></router-view></div></template><script >import {useRouter} from 'vue-router'// import router from './router/index.js' //从router文件夹中取值。实际上就是导入的router/index.jsimport {ref} from 'vue'export  default {setup (props,context){const newsId=ref('fr001')const router=useRouter()const news=()=>{router.push('/news/' + newsId.value )}const circle=()=>{router.push({path:'/circle',query:{name:'sina',site:'www.sina.com.cn',age:10}})}return {newsId,news,circle}}}</script><style>.router-link-active{font-size:18px;color:goldenrod;font-weight:bolder}
</style>

Router/index.js

// 1、路由映射表,createWebHashHistory是创建历史模式的路由
import {createRouter,createWebHashHistory,createWebHistory} from 'vue-router'//2、引入页面组件
import Home from './../components/Home.vue'
import Mine from './../components/Mine.vue'
import News from './../components/News.vue'
import MineMsg from './../components/MineMsg.vue'
import MineOrder from './../components/MineOrder.vue'
import Circle from './../components/Circle.vue'
//3、创建路由对象
const routes=[{path:'/',redirect:'/home'},{path:'/home',component:Home},//含有二级路由,不需要加斜杠{path:'/mine',component:Mine,children:[{path:'/mine',redirect:'/mine/msg'},{path:'msg',component:MineMsg},{path:'order',component:MineOrder},]},//动态路由，动态绑定id，要使用冒号：{path:'/news/:id',component:News},{path:'/circle',component:Circle},
]//4、创建路由
const router=createRouter({history:createWebHashHistory(),//设置路由方位方式routes
})//5、导出路由
export default router

circle.vue

<template><div id="circle">圈子<p>{{$route.query}}</p><p>{{$route.query.site}}</p><p>{{$route.query.name}}</p><p>{{$route.query.age}}</p></div>
</template><script>import {useRoute} from 'vue-router'export default {name: 'Circle',setup(){let route=useRoute()//获得当前路由console.log('dfdfasdfasdfsfsa')console.log(route.query)}}
</script><style scoped>
#circle{width: 400px;height: 600px;background-color: green;
}
</style>

14、VueRouter-router和Route的区别

VueRouter-router是全局的，可全局使用
Route是局部使用
好像这么说也不是太准确