菜鸟学习vue3笔记-vue3 router回顾

1、路由router

pnpm i  vue-router

2、创建使用环境

1.src下创建 router文件夹、里面创建index.ts文件

//创建一个路由暴露出去

//1.引入createRouter
import { createRouter, createWebHistory } from "vue-router";


// import Home  from '../components/Home.vue'

// import Goods from '../components/Goods.vue'
// import Mine from "../components/Mine.vue";


//2.创建路由器
const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: "/home",
      component: ()=>import ("../components/Home.vue"),

      // component:Home

    },
    {
      path: "/goods",
      component: ()=>import('../components/Goods.vue'),
      // component:Goods
    },
    {
      
      path: "/mine",
      component: ()=>import('../components/Mine.vue'),
      // component:Mine
    },

    {
      path:'/',
      redirect:'/home',
      
    }
  ],
});
export default router

2.main.ts文件中配置

//引入路由器

import router from './router'

const app=createApp(App)

//使用路由器

app.use(router)

3.页面中使用 RouterView, RouterLink

<template>
  <div class="box">
    <div class="nav-box">
      <RouterLink to="/home">首页</RouterLink>
      <RouterLink to="/goods">商品</RouterLink>
      <RouterLink to="/mine">我的</RouterLink>
    </div>

    <div class="content-box">
      <RouterView></RouterView>
    </div>
  </div>
</template>

<script setup lang="ts">
import { RouterView, RouterLink } from "vue-router";
</script>

<style lang="scss" scoped>
.box {
  .nav-box {
    background-color: red;
    // border: 1px solid #00ff00;

    display: flex;
    > a {
      flex: 1;
      border: 1px solid #00ff00;
      text-align: center;
    }
  }
}
</style>

to 的两种写法

<RouterLink to="/home">首页</RouterLink>
      <RouterLink to="/goods">商品</RouterLink>
      <RouterLink to="/mine">我的</RouterLink>

<RouterLink
        :to="{
          path: '/mine',
        }"
        >我的</RouterLink
      >

命名路由

{
      path: "/home",
      name:'homePage',
      component: ()=>import ("../pages/Home.vue"),

      // component:Home

    },
    {
      path: "/goods",
      name:'goodsPage',
      component: ()=>import('../pages/Goods.vue'),
      children:[
        {
          path:'/detial',
          component:()=>import('../pages/GoodsDeatil.vue')
        }
      ]
      // component:Goods
    },
    {
      
      path: "/mine",
      name:'mine',
      component: ()=>import('../pages/Mine.vue'),
      // component:Mine
    },



 <RouterLink
        :to="{
          name: 'mine',
        }"
        >我的</RouterLink
      >

嵌套路由

  {
      path: "/goods",
      name:'goodsPage',
      component: ()=>import('../pages/Goods.vue'),
      children:[
        {
          path:'detial',
          component:()=>import('../pages/GoodsDeatil.vue')
        }
      ]
      // component:Goods
    },

<template>
  <div class="box">
    <div class="left">
      <ul>
        <li v-for="(item, index) in goods" :key="index">
          <RouterLink to="/goods/detial"> {{ item }}</RouterLink>
        </li>
      </ul>
    </div>
    <div class="right">
      <RouterView></RouterView>
    </div>
  </div>
</template>

query 传参

  <!-- 第一种写法 -->
          <RouterLink :to="`/goods/detial?index=${index}&title=${item}`">
            {{ item }}</RouterLink
          >

 <!-- 第二种写法 -->
          <RouterLink
            :to="{
              path: '/goods/detial',
              query: {
                index: index,
                title: item,
              },
            }"
          >
            {{ item }}</RouterLink
          >


<!-- <template>
  <div>商品详情{{ router.query.index }}---{{ router.query.title }}</div>
</template> -->
<template>
  <div>商品详情{{ query.index }}---{{ query.title }}</div>
</template>

<script setup lang="ts">
import { toRefs } from "vue";
import { useRoute } from "vue-router";
let router = useRoute();

// console.log(useRoute().query);

let { query } = toRefs(router);

// let { index, title } = toRefs(useRoute().query);
</script>

<style lang="scss" scoped></style>

params 传参

 {
      path: "/goods",
      name:'goodsPage',
      component: ()=>import('../pages/Goods.vue'),
      children:[
        {
          path:'detial/:index/:title',
          component:()=>import('../pages/GoodsDeatil.vue')
        }
      ]
      // component:Goods
    },

  <router-link :to="`/goods/detial/${index}/${item}`">
            {{ item }}</router-link
          >

<template>
  <div>商品详情{{ params.index }}---{{ params.title }}</div>
</template>

<script setup lang="ts">
import { toRefs } from "vue";
import { useRoute } from "vue-router";
let router = useRoute();

console.log(router);

let { params } = toRefs(router);

//这种写法必须写name path报错
{
      path: "/goods",
      name:'goodsPage',
      component: ()=>import('../pages/Goods.vue'),
      children:[
        {
          path:'detial/:index/:title',
          name:'xiangqing',
          component:()=>import('../pages/GoodsDeatil.vue')
        }
      ]
      // component:Goods
    },






<!-- 第二种写法 -->
          <router-link
            :to="{
              // path: '/goods/detial', //path 会报错

              name: 'xiangqing',
              params: {
                index: index,
                title: item,
              },
            }"
          >
            {{ item }}</router-link
          >

路由组件props（params 传参）

{
      path: "/goods",
      name:'goodsPage',
      component: ()=>import('../pages/Goods.vue'),
      children:[
        {
          path:'detial/:index/:title?',
          name:'xiangqing',
          props:true, //开启 只处理params参数
          component:()=>import('../pages/GoodsDeatil.vue')
        }
      ]
      // component:Goods
    },


<template>
  <div>商品详情{{ index }}---{{ title }}</div>
</template>

<script setup lang="ts">
import { toRefs } from "vue";

defineProps(["index", "title"]);//接受属性
// import { useRoute } from "vue-router";
// let router = useRoute();

// console.log(router);

// let { params } = toRefs(router);

// let { index, title } = toRefs(useRoute().query);
</script>

<style lang="scss" scoped></style>

query传参 这样设置

props(router){
          return router.query
          },

编程式导航

router-link 本质是a 标签

<script setup lang="ts">
import { onMounted } from "vue";

import { useRouter } from "vue-router";

let router = useRouter();

onMounted(() => {
  setTimeout(() => {
    router.push("/mine");
  }, 3000);
});


 <button @click="lookDetail(item, index)">点击查看</button>

let lookDetail = (item, index) => {
  router.push({
    name: "xiangqing",
    params: {
      index: index,
      title: item,
    },
  });
};