vue.js 路由第二篇

一、命名路由

1、为什么使用命名路由

2、代码及演示

在src\components\Home.vue文件中的<router-link>标签中动态绑定to属性的值，指定要跳转到的路由名称，并传递参数。

<template>
  <div class="home-container">
   <h3>Home组件</h3>
   <router-link :to="{ name: 'MovieDetails', params: { id: 3 } }">跳转到MovieDetails组件</router-link>
 <router-view></router-view>
  </div>
</template>

router/index.js 增加路由规则

 const routes= [
      { path: '/:id', name: 'MovieDetails', component: () => import ('../components/movieDetails.vue'), props: true }
]

MovieDetails 页面

<template>
  <p>电影{{ $route.params.id }}页面</p>
</template>

二、编程式导航

1、基本概念

什么式编程式导航

2、代码及演示

2.1 演示push()方法的使用

修改src\components\Home.vue文件，定义一个按钮，用于跳转到MovieDetails组件，并传递参数。

<template>
  <div style="text-align: center; margin-top: 30px;">
    <h3>🏠 首页内容</h3>
    <p>地址：/home<br>刷新不丢失</p>
     <h3>Home组件</h3>
   <router-link :to="{ name: 'MovieDetails', params: { id: 3 } }">跳转到MovieDetails组件</router-link>
    <router-view></router-view>


       <a href="#" @click.prevent="gotoMovie(4)">编程式跳转到MovieDetails组件</a>

  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
const gotoMovie = movieId => {
  router.push({
    name: 'MovieDetails', params: { id: movieId }
  })
}
</script>

2.2 go方法的使用

修改src\components\MovieDetails.vue文件，在该文件中定义一个按钮，用于后退到上一个组件页面。

<template>
  <p>电影{{ $route.params.id }}页面</p>
  <button @click="goBack">后退</button>

</template>

<script setup> 
import { useRouter } from 'vue-router'
const router = useRouter()
const goBack = () => {
  router.go(-1)
}

</script>

三、导航守卫

1、基本概念

什么是导航守卫

1.2 全局导航守卫

2、代码及演示

2.1 全局导航守卫

新建src\components\Login.vue文件，实现登录页面内容。

<template>
  <div class="login-container">
    登录页面
  </div>
</template>

在router\index.js文件的routes中添加路由匹配规则，通过name属性定义Login组件路由规则的名称。

{ path: '/login', name: 'Login', component: () => import ('./components/Login.vue') }

在router\index.js文件中，在最后一行代码"export default router"的上一行位置注册全局导航守卫。

router.beforeEach((to, from, next) => {
  let isLogin = false
  if (to.name == 'MovieDetails') {
    if (isLogin) { next()
    } else {
      next({ name: 'Login' })
    }
  } else { next() }
})

在浏览器中访问http://127.0.0.1:5173/。先切换到首页，然后单击"跳转到MovieDetails组件"链接，会显示登录页面，说明全局导航守卫拦截成功，如下图所示。

2.2 全局守卫导航案例2

新建运行页面views/zym.vue

<template>
  <div>
    <h1>Vue 全局导航守卫演示</h1>
    <div>
      <router-link to="/">首页</router-link> |
      <router-link to="/user">个人中心（需登录）</router-link> |
      <router-link to="/login">登录页</router-link>
    </div>
    <router-view />
  </div>
</template>

 
// 这里啥都不用写，路由交给 router 配置

路由配置文件（router/index.js）

import { createRouter, createWebHistory } from 'vue-router'
 import Home from '../components/views/Home.vue'
import Login from '../components/views/Login.vue'
import User from '../components/views/User.vue'
const routes = [
  { path: '/', component: Home },
  { path: '/user', component: User },
  { path: '/login', component: Login },
]

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

// ======================================
// 全局前置守卫（最常用：登录拦截）
// ======================================
router.beforeEach((to, from, next) => {
  console.log('即将前往：', to.path)

  // 判断是否登录
  const isLogin = localStorage.getItem('isLogin')

  // 去个人中心，但没登录 → 跳登录
  if (to.path === '/user' && !isLogin) {
    alert('请先登录！')
    next('/login')
  } else {
    next() // 放行
  }
})

// 全局后置守卫
router.afterEach((to) => {
  console.log('已到达：', to.path)
  document.title = to.path === '/' ? '首页' : to.path === '/user' ? '个人中心' : '登录'
})

export default router

首页组件（views/Home.vue）

<template>
  <div>
    <h2>首页</h2>
    <p>任何人都可以访问</p>
  </div>
</template>

个人中心（views/User.vue）

<template>
  <div>
    <h2>个人中心</h2>
    <p>只有登录后才能看到我</p>
    <button @click="logout">退出登录</button>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()

const logout = () => {
  localStorage.removeItem('isLogin')
  alert('已退出')
  router.push('/')
}
</script>

登录页（views/Login.vue）

<template>
  <div>
    <h2>登录页</h2>
    <button @click="login">点击登录</button>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()

const login = () => {
  localStorage.setItem('isLogin', 'true')
  alert('登录成功')
  router.push('/user') // 跳回个人中心
}
</script>

核心代码注释讲解