vue-router使用详解

最新推荐文章于 2024-07-23 16:00:30 发布

Andrew_SJ

最新推荐文章于 2024-07-23 16:00:30 发布

阅读量1.2k

点赞数

分类专栏：前端文章标签： vue vue-router

本文链接：https://blog.csdn.net/Andrew_SJ/article/details/118898447

版权

这篇博客深入解析了Vue Router的使用，包括安装、路由模式（Hash和HTML5）、动态路由、嵌套路由、命名路由和命名视图、编程式导航、重定向和别名，以及导航守卫（全局、路由独享和组件级别）。文章通过实例展示了如何配置和应用这些特性，帮助开发者更好地理解和掌握Vue应用的路由管理。

摘要由CSDN通过智能技术生成

安装

yarn add vue-router

使用

HTML:

// App.vue

<script src="https://unpkg.com/vue@3"></script>
<script src="https://unpkg.com/vue-router@4"></script>

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!--使用 router-link 组件进行导航 -->
    <!--通过传递 `to` 来指定链接 -->
    <!--`<router-link>` 将呈现一个带有正确 `href` 属性的 `<a>` 标签-->
    <router-link to="/">Go to Home</router-link>
    <router-link to="/about">Go to About</router-link>
    
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</div>

自定义路由组件：

// /components/UserPost.vue

<template>
    <div>User {
   {
   this.$route.params}} with post {
   {
   this.$route.postId}}</div>
</template>

JavaScript：

// main.js

// 从vue-router引入createRouter和createWebHashHistory. 如果不引入的话，
// 使用VueRouter.createRouter()来使用
import {
   createRouter, createWebHashHistory} from 'vue-router'

// 1. 定义路由组件.
// 也可以从其他文件导入
// (1)直接定义路由组件
const Home = {
    template: '<div>Home</div>' }
const About = {
    template: '<div>About</div>' }
// (2)从其他组件导入
import UserPost from "./components/UserPost" //(/components/下有一个名为UserPost.vue文件)

// 2. 定义一些路由
// 每个路由都需要映射到一个组件。
// 我们后面再讨论嵌套路由。
const routes = [
  {
    path: '/', component: Home },
  {
    path: '/about', component: About },
  {
    path: '/users/:username/posts/:postId', component: UserPost } // 此路由匹配 http://example.com/users/Jack/posts/123
]

// 3. 创建路由实例并传递 `routes` 配置
// 你可以在这里输入更多的配置，但我们在这里
// 暂时保持简单
const router = createRouter({
   
  // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
	history: createWebHashHistory(),
  routes, // `routes: routes`的缩写
})


// 5. 创建并挂载根实例
const app = Vue.createApp({
   })
//确保 _use_ 路由实例使
//整个应用支持路由。
app.use(router) // 此时，可以在任意组件中使用this.$router访问路由对象，并以this.$route的形式访问当前路由

app.mount('#app