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.js
  import {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.js
  import {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.js
  import {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是局部使用
好像这么说也不是太准确

版权声明：本文为weixin_43745804原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。