简单的路由跳转（router）

简单的路由跳转（router）

语法解释

路由配置

1.导入 Vue Router 的功能：

    import { createRouter, createWebHistory } from 'vue-router'

从 vue-router 包中导入 createRouter 和 createWebHistory 函数。createRouter 用于创建路由实例，而 createWebHistory 用于配置路由历史记录模式（即使用 HTML5 History API）。

2.注册组件：

    import Login from '../components/Login.vue'//组件地址
    import Register from '../components/Register.vue'
    ......

需要把在路由中使用的组件导入进来

3.创建路由规则：

const routes = [
  {
    path: '/login',
    name: 'Login',
    component: Login
  },
  {
    path: '/register',
    name: 'Register',
    component: Register
  },
  // 可以添加重定向
  {
    path: '/',
    redirect: '/login'
  }
]

可以选择定义路由数组来存放将要使用的路由，并制定响应的规则。

path: 定义路由的路径
name: 为该路由指定一个名称，方便在编程式导航时使用。
component: '/XXX' 指明该路由对应的组件是XXX，即用户访问 /XXX 时，会渲染这个组件
redirect: '/XXX' 当用户访问path路径 时，将会被重定向到 /XXX 路径

4.创建路由实例

const router = createRouter({
  history: createWebHistory(),//设置路由历史
  routes//规则数组
})

更多参数信息参考 https://router.vuejs.org/zh/guide/

实现流程：

步骤一：

npm install vue-router@3||4 //3是vue2,4是vue3

步骤二：

src文件夹下创建router文件夹，然后在router文件夹中创建index.js对路由进行配置

import { createRouter, createWebHistory } from 'vue-router'
import Login from '../components/Login.vue' // 你的登录组件路径
import Register from '../components/Register.vue' // 新建的注册组件

const routes = [
  {
    path: '/login',
    name: 'Login',
    component: Login
  },
  {
    path: '/register',
    name: 'Register',
    component: Register
  },
  // 可以添加重定向
  {
    path: '/',
    redirect: '/login'
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

步骤三：

在APP.vue中渲染router-view

<template>
  <div id="app">
    <router-view /> <!-- 只用 router-view 来显示路由组件 -->
  </div>
</template>

<script>
export default {
  name: 'App',
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

步骤四：

在main.js中引入并注册路由

import { createApp } from 'vue';
import App from './App.vue';
import router from './router'; // 引入路由

createApp(App)
  .use(router) // 注册路由
  .mount('#app');

步骤五：

在组件中调用路由进行简单跳转：

const router = useRouter();//声明
...
router.push('/XXX');//使用router进行跳转