1、构建vue3项目

npm init vue@latest
//或者
npm init vite@latest
//或者
npm create vite@latest
//或者
yarn create vite
 
...

2、安装vue-router

使用Vue3 安装对应的router4版本

使用Vue2安装对应的router3版本

npm install vue-router@4

3、创建router文件，src/router/index.ts

//引入路由对象
import {
  createRouter,
  createWebHistory,
  createWebHashHistory,
  createMemoryHistory,
  RouteRecordRaw,
} from "vue-router";
 
//vue2 mode history vue3 createWebHistory
//vue2 mode  hash  vue3  createWebHashHistory
//vue2 mode abstact vue3  createMemoryHistory  ssr服务端渲染
 
//路由数组的类型 RouteRecordRaw
// 定义一些路由
// 每个路由都需要映射到一个组件。
const routes: Array<RouteRecordRaw> = [
  {
    path: "/",
    name: "login",
    component: () => import("../components/login.vue"),
  },
  {
    path: "/reg",
    name: "reg",
    component: () => import("../components/reg.vue"),
  },
];
 
const router = createRouter({
  history: createWebHashHistory(),
  routes: routes,
});
 
//导出router
export default router;

4、在mian.ts中使用

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
 
import router from "./router"
 
const app = createApp(App)
app.use(router)
app.mount('#app')

5、router-view#

router-view 将显示与 url 对应的组件。你可以把它放在任何地方，以适应你的布局

<template>
  <div>
    666
    <div>
      
      <router-link replace to="/">loginrouter-link>
      <router-link replace style="margin-left:20px" to="/reg">regrouter-link>
 
      <div>
        <button @click="toPage('login')">loginbutton>
        <button @click="toReg('reg')">regbutton>
        <button @click="pre()">prebutton>
        <button @click="next()">nextbutton>
      div>
 
    div>
    <hr>
    <router-view>router-view>
  div>
template>
 
<script setup lang="ts">
import { useRouter } from "vue-router";
const router = useRouter();
// let toPage = (url: string) => {
//   // 字符串path形式
//   // router.push(url);
//   // 对象形式
//   // router.push({
//   //   path: url,
//   // });
//   // 命名
//   router.push({
//     name: url,
//   });
// };
// 不留router历史记录
let toPage = (url: string) => {
  router.push({
    name: url,
    query: {
      name: 'admin',
      pwd: 123456
    }
  });
};
let toReg = (name: string) => {
  router.push({
    name: name,
    query: {
      kkk: '000000'
    }
  })
}
 
let pre = () => {
  router.back();
  // router.go(-1)
};
let next = () => {
  router.go(1);
};
script>
 
<style scoped>
style>

6、router的几种跳转方式

router-link

第一种
 <router-link to="/">loginrouter-link>
 
第二种 replace 不会留下历史记录
 <router-link replace to="/">loginrouter-link>

编程式导航：router.push()     router.replace()  router.back()  router.go()

 name跳转：

 router.push({
    name:'login',
    query: {
      name: 'admin',
      pwd: 123456
    }
  });
 
接收参数
 
import { useRoute } from 'vue-router';
const route = useRoute()
console.log("路由传参", route.query)
 
或=====================
 
router.push({
    name: url,
    params: {
      name: 'admin',
      pwd: 123456
    }
  });
 
接收参数
 
import { useRoute } from 'vue-router';
const route = useRoute()
console.log("路由传参", route.params)

path跳转：

 router.push({
    path:'/login',
    query: {
      name: 'admin',
      pwd: 123456
    }
  });
 
接收参数
 
import { useRoute } from 'vue-router';
const route = useRoute()
console.log("路由传参", route.query)

动态路由传参

在 Vue Router 中，我们可以在路径中使用一个动态字段来实现，我们称之为 路径参数

路径参数 用冒号 : 表示。当一个路由被匹配时，它的 params 的值将在每个组件

 

const routes: Array<RouteRecordRaw> = [
  {
    path: "/",
    name: "login",
    component: () => import("../components/login.vue"),
  },
  {
    path: "/reg/:name",
    name: "reg",
    component: () => import("../components/reg.vue"),
  },
];

router.push({
        name: 'Reg',
        params: {
            name: "我是动态路由"
        }
    })
 
接收参数
 
import { useRoute } from 'vue-router';
const route = useRoute()
console.log("reg", route.params)
 
 
或传多个参数
 {
    path: "/reg/:name/:id",
    name: "reg",
    component: () => import("../components/reg.vue"),
  }
 
router.push({
        name: 'Reg',
        params: {
            name: "我是动态路由",
            id:123
        }
    })

使用name和path的区别：

1、name传参可以使用params、query

2、path传参只能使用query

3、query 在路由配置不需要设置参数，而 params 必须设置

4、query 传递的参数会显示在地址栏中

5、params传参刷新会无效，但是 query 会保存传递过来的值，刷新不变

嵌套路由

const routes: Array<RouteRecordRaw> = [
  {
    path: "/",
    name: "Login",
    component: () => import('../components/login.vue')
  },
  {
    //动态路由参数
    path: "/reg",
    name: "Reg",
    component: () => import('../components/reg.vue'),
    children: [
      {
        path: "",
        name: "tab1",
        component: () => import('../components/tab1.vue')
      },
      {
        path: "tab2",
        name: "tab2",
        component: () => import('../components/tab2.vue')
      }
    ]
  }
]

<template>
  <div class="reg">
    我是注册
 
    <div class="tab">
      <button @click="$router.push('/reg')">tab1button>
      <button @click="$router.push('/reg/tab2')">tab2button>
    div>
    <router-view />
  div>
template>

路由命名视图

有时候想同时 (同级) 展示多个视图，而不是嵌套展示，例如创建一个布局，有 sidebar (侧导航) 和 main (主内容) 两个视图，这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果 router-view 没有设置名字，那么默认为 default

一个视图使用一个组件渲染，因此对于同个路由，多个视图就需要多个组件。确保正确使用 components 配置 (带上 s)：

const routes: Array<RouteRecordRaw> = [
  {
    path: "/",
    name: "Login",
    component: () => import('../components/login.vue')
  },
  {
    //动态路由参数
    path: "/reg",
    name: "Reg",
    component: () => import('../components/reg.vue'),
    children: [
      {
        path: "",
        name: "tab1",
        component: () => import('../components/tab1.vue')
      },
      {
        path: "tab2",
        name: "tab2",
        components: {
          default: () => import('../components/tab2.vue'),
          two: () => import('../components/login.vue')
        }
      }
    ]
  }
]

对应Router-view 通过name 对应组件 

<div>
     <router-view />
     <router-view name="two">router-view>
div>

 路由重定向

1、字符串形式

const routes: Array<RouteRecordRaw> = [
  {
    //动态路由参数
    path: "/",
    name: "Reg",
    component: () => import('../components/reg.vue'),
    redirect: "/tab2",
    children: [
      {
        path: "/tab1",
        name: "tab1",
        component: () => import('../components/tab1.vue')
      },
      {
        path: "tab2",
        name: "/tab2",
        components: {
          default: () => import('../components/tab2.vue'),
          two: () => import('../components/login.vue')
        }
      }
    ]
  }
]

跳转 '/' 会重定向到  /tab2

  router.push({
    path: '/',
  })
 

2、对象形式

const routes: Array<RouteRecordRaw> = [
  {
    //动态路由参数
    path: "/",
    name: "Reg",
    component: () => import('../components/reg.vue'),
    redirect: { path: 'tab1' },
    children: [
      {
        path: "/tab1",
        name: "tab1",
        component: () => import('../components/tab1.vue')
      },
      {
        path: "tab2",
        name: "/tab2",
        components: {
          default: () => import('../components/tab2.vue'),
          two: () => import('../components/login.vue')
        }
      }
    ]
  }
]

3、函数形式

const routes: Array<RouteRecordRaw> = [
  {
    //动态路由参数
    path: "/",
    name: "Reg",
    component: () => import('../components/reg.vue'),
    redirect: (to) => {
      return {
        path: '/tab1',
        query: to.query
      }
    },
    children: [
      {
        path: "/tab1",
        name: "tab1",
        component: () => import('../components/tab1.vue')
      },
      {
        path: "tab2",
        name: "/tab2",
        components: {
          default: () => import('../components/tab2.vue'),
          two: () => import('../components/login.vue')
        }
      }
    ]
  }
]

路由别名 alias

将 / 别名为 /root，意味着当用户访问 /root时，URL 仍然是 /

const routes: Array<RouteRecordRaw> = [
  {
    path: "/",
    name: "Reg",
    component: () => import('../components/reg.vue'),
    alias: ['/root', '/roots', '/home'],
    children: [
      {
        path: "/tab1",
        name: "tab1",
        component: () => import('../components/tab1.vue')
      },
      {
        path: "tab2",
        name: "/tab2",
        components: {
          default: () => import('../components/tab2.vue'),
          two: () => import('../components/login.vue')
        }
      }
    ]
  }
]