十四、使用 Vue Router 开发单页应用（3）

最新推荐文章于 2024-07-17 01:22:29 发布
最新推荐文章于 2024-07-17 01:22:29 发布
阅读量1.1k 收藏 4
点赞数 2
分类专栏： # Vue.js 3.0 从入门到实战 文章标签： 命名路由 命名视图 编程式导航 传递 prop 到路由组件 HTML 5history模式
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/GXL_1012/article/details/128173875
版权

本章概要

  • 命名路由
  • 命名视图
  • 编程式导航
  • 传递 prop 到路由组件
  • HTML 5 history 模式

14.5 命名路由

有时通过一个名称来标识路由会更方便，特别是在链接到路由，或者执行导航时。可以在创建 Router 实例时，在routes 选项中为路由设置名称。
修改 router 目录下的 index.js ，为路由定义名字。如下：

import { createRouter, createWebHashHistory } from 'vue-router'
import Home from '@/components/Home'
import News from '@/components/News'
import Books from '@/components/Books'
import Videos from '@/components/Videos'
import Book from '@/components/Book'
import books from '../assets/books'

export default createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: '/',
      redirect:{
        name:'news'
      }
    },
    {
      path: '/news',
      name:'news',
      component: News,
    },
    {
      path: '/books',
      name:'books',
      component: Books,
      children: [
        { path: '/book/:id',name:'book', component: Book }
      ]
    },
    {
      path: '/videos',
      name:'videos',
      component: Videos,
    },
  ]
})

在根路径（/）的配置中，使用 redirect 参数将对该路径的访问重定向到命名的路由 news 上。当访问 http://localhost:8080/ 时，将直接跳转到 News 组件。
以下是重定向的另外两种配置方式：

{
  path:'/'
  // 指定目标路径
  redirect:'/news'
},
{
  // /search/screens -> /search?q=screens
  path:'search/:searchText',
    redirect:to => {
    	return { path:'/search',query:{q:to.params.searchText} }
    }
}

修改 App.vue ，在设置导航链接时使用命名路由。如下：

<template>
  <p>
    <router-link to="/">首页</router-link>
    <router-link :to="{ name: 'news' }">新闻</router-link>
    <router-link :to="{ name: 'books' }">图书</router-link>
    <router-link :to="{ name: 'videos' }">视频</router-link>
  </p>
  <router-view></router-view>
</template>

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

注意：to 属性的值现在是表达式，因此需要使用 v-bind 指令

修改 Books.vue ，也使用命名路由。如下：

<template>
    <div>
        <h3>图书列表</h3>
        <url>
            <li v-for="book in books" :key="book.id">
                <router-link :to="{ name: 'book', params: { id: book.id } }">{{ book.title }}</router-link>
            </li>
        </url>
        <!-- Book 组件在这里渲染 -->
        <router-view></router-view>
    </div>
</template>

<script>
// 导入 Books 数组
import Books from '@/assets/books'
export default {
    data() {
        return {
            books: Books
        }
    }
}
</script>

接下来可以再次运行项目，观察效果，测试效果和前面的例子完全一样。
在路由配置中，还可以为某个路径取个别名，例如：

routes:[
  { path:'/a', component: A, alias:'/b' }
]

“/a” 的别名是“/b”，当用户访问 “/b”时，URL会保持为“/b”，但是路由匹配是“/a”，就想用户正在访问“/a”一样。
别名的功能可以自由地将 UI 结构映射到任意的 URL ，而不受限于配置的嵌套路由结构。
注意别名和重定向的区别，对于重定向而言，当用户访问“/a”时，URL 会被替换成“/b”，然后匹配路由为“/b”。

14.6 命名视图

有时需要同时（同级）显示多个视图，而不是嵌套展示。例如，创建一个布局，有 header（头部）、sidebar（侧边栏）和 main（主内容） 3个视图，这时命名视图就派上用场了。可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。例如：

<router-view class="view header" name="header"></router-view>
<router-view class="view sidebar" name="sidebar"></router-view>
<router-view class="view main" name="main"></router-view>

没有设置名字的 router-view，默认为 default。
一个视图使用一个组件渲染，因此对于同一个路由，多个视图就需要多个组件。在配置路由时，使用 components 选项。代码如下：

const router = createRouter({
  history:createWebHashHistory(),
  routes:[
    {
      path:'/',
      components:{
        default:Main,
        header:Header,
        sidebar:Sidebar
      }
    }
  ]
})

可以使用带有嵌套视图的命名视图创建复杂的布局，这时也需要命名用到的嵌套 router-view 组件。
下面看一个设置面板的示例，如下：
在这里插入图片描述

Nav 是一个常规组件，UserSettings 是一个父视图组件，UserEmailsSubscriptions、UserProfile 和 UserProfilePreview 是嵌套的视图组件。
UserSettings 组件的模板代码类似如下形式。

<!-- UserSettings.vue -->
<div>
	<h1>User Settings</h1>
  <NavBar></NavBar>
  <router-view></router-view>
  <router-view name="helper"></router-view>
</div>

其它 3 个 组件的模板代码如下：

<!-- UserEmailsSubscriptions.vue -->
<div>
  <h3>UserEmails Subscriptions</h3>
</div>

<!-- UserProfile.vue -->
<div>
  <h3>Edit your profile</h3>
</div>

<!-- UserProfilePreview.vue -->
<div>
  <h3>Preview of your profile</h3>
</div>

在路由配置中按上述布局进行配置。如下：

{
  path:'/settings',
  component:UserSettings,
  children:[{
    path:'emails',
    component:UserEmailsSubscriptions
  },{
    path:'profile',
    components:{
      component:{
        default:UserProfile,
        helper:UserProfilePreview
      }
    }
  }]
}

继续例子，将图书详情信息修改为与 Books 视图统计显示。
编辑 App.vue ，添加一个命名视图。如下：

<template>
  <p>
    <router-link to="/">首页</router-link>
    <router-link :to="{ name: 'news' }">新闻</router-link>
    <router-link :to="{ name: 'books' }">图书</router-link>
    <router-link :to="{ name: 'videos' }">视频</router-link>
  </p>
  <router-view></router-view>
  <router-view name="bookDetail"></router-view>
</template>

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

修改 router 目录下的 index.js 文件，删除 Books 组件的嵌套路由配置，将 Book 组件路由设置为顶层路由。如下：

import { createRouter, createWebHashHistory } from 'vue-router'
import Home from '@/components/Home'
import News from '@/components/News'
import Books from '@/components/Books'
import Videos from '@/components/Videos'
import Book from '@/components/Book'
import books from '../assets/books'

export default createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: '/',
      redirect: {
        name: 'news'
      }
    },
    {
      path: '/news',
      name: 'news',
      component: News,
    },
    {
      path: '/books',
      name: 'books',
      component: Books
    },
    {
      path: '/book/:id',
      name: 'book',
      components: { bookDetail: Book }
    },
    {
      path: '/videos',
      name: 'videos',
      component: Videos,
    },
  ]
})

至于 Books 组件内的 router-view ，删不删除都不影响 Book 组件的渲染。为了代码的完整性，可以将这些无用的代码注释删除。

Book.vue

<template>
    <p> 图书ID：{{ book.id }} </p>
    <p> 标题：{{ book.title }} </p>
    <p> 描述：{{ book.desc }} </p>
</template>

<script>
import Books from '@/assets/books'
export default {
    data() {
        return {
            book: {}
        }
    },
    created() {
        this.book = Books.find((item) => item.id == this.$route.params.id);
        this.$watch(
            () => this.$route.params,
            (toParams) => {
                console.log(toParams)
                this.book = Books.find((item) => item.id == toParams.id);
            }
        )
    }
}
</script>

运行项目，可以看到当单击一个图书链接时，图书的详细信息在 Books 视图同级显示了，如下：
在这里插入图片描述

14.7 编程式导航

除了使用 router-link 创建 a 标签定义导航链接，还可以使用 router 的实例方法，通过编写代码来导航。
要导航到不同的 URL ，可以使用 router 实例的 push() 方法，router.push() 方法会向 history 栈添加一个新的记录，所以当用户单击浏览器后退按钮时，将回到之前的 URL 。
当单击 router-link 时，router.push() 方法会在内部调用，换句话说，单击 router-link :to=“…” 等同于调用 router.push() 方法。
router.push() 方法的参数可以是字符串路径，也可以是位置描述对象。调用形式很灵活，代码如下：

// 字符串路径
router.push('home')
// 对象
router.push({path:'home'})
// 命名的路由
router.push({name:'user',params:{userId:'123'}})
// 带查询参数，结果是 /register?plan=private
router.push({path:'register',query:{plan:'private'}})
// 使用 hash，结果是 /about#team
router.push({path:'/about',hash:'#team'})

需要注意的是，如果提供了 push，params 会被忽略。那么对于 /book/:id 这种形式的路径调用 router.push() 的方式也需要改变。一种是通过命名路由，；一种是在 path 中提供带参数的完整路径。如下：

const id = 1;
// /book/1
router.push({ name:'book',params:{id:book.id} })
// /book/1
router.push({ path:`book/${id}` })

router.push() 方法和所有其他的导航方法都返回一个 Promise ，允许等待直到导航完整，并知道结果是成功还是失败。
继续前面的例子，修改 Books.vue ，用 router.push() 方法替换 router-link 。如下：

<template>
    <div>
        <h3>图书列表</h3>
        <url>
            <li v-for="book in books" :key="book.id">
                <!-- <router-link :to="{ name: 'book', params: { id: book.id } }">{{ book.title }}</router-link> -->
                <a href="#" @click.prevent="goRoute({ name: 'book', params: { id: book.id } })">
                    {{ book.title }}
                </a>
            </li>
        </url>
        <!-- Book 组件在这里渲染 -->
        <!-- <router-view></router-view> -->
    </div>
</template>

<script>
// 导入 Books 数组
import Books from '@/assets/books'
export default {
    data() {
        return {
            books: Books
        }
    },
    methods: {
        goRoute(location) {
            //当单击的URL中的参数id与当前路由对象参数id值不同时，才调用$router.push方法
            if (location.params.id != this.$route.params.id)
                this.$router.push(location)
        }
    }
}
</script>

说明：

  • 在组件实例内部，可以通过 this.router 访问路由实例，进而调用 this.router.push() 方法。
  • this.router 表示全局的路由对象，包含了用于路由跳转的方法，其属性 currentRouter 可以获取当前路由对象；this.route 表示当前路由对象，每一个路由都有一个 route 对象，可以获取对应的 name、path、params、query 等属性。

replace() 方法对应的声明式路由跳转为 《router-link :to=“…” replace》。
也可以在调用 push() 方法时，在位置对象中指定属性 replace:true 。如下：

router.push({ path:'/home',replace:true })
// 相当于
router.replace({ path:'/home' })

replace() 方法与 push() 方法用法相同，此处不再赘述。
与 window.history 对象的 forward() 、back() 、go() 方法对应的 router 实例的方法如下：

router.forward()
router.back()
router.go(n)

14.8 传递 prop 到路由组件

在组件中使用 route 会导致与路由的紧密耦合，这限制了组件的灵活性，因为它只能在某些 URL 上使用。虽然这并不一定是坏事，但是可以用一个 props 选项来解耦。如下：

const User = {
  template:'<div>User {{ $route.params.id }}</div>'
}
const routes = [{ path:'/user/id',component:User }]

可以为 User 组件，来避免硬编码 route.params.id。修改后的代码如下：

const User = {
  props:[ 'id' ],
  template:'<div>User{{ id }}</div>'
}
const routes = [{ path:'/user/id',component:User,props:true }]

在配置路由时，新增一个 props 选项，将它的值设置为 true 。当路由到 User 组件时，会自动获取 route.params.id 的值作为 User 组件的 id prop 的值。
对于带有命名视图的路由，必须为每个命名视图定义 props 选项。如下：

const routes = [
  {
    path:'/user/:id',
    component:{default:User,sidebar:Sidebar},
    props:{default:true,sidebar:false}
  }
]

当props 是一个对象时，它将按原样设置为组件 props ，这在 props 是静态的时候很有用。如下：

const routes = [
  {
    path:'promotion/from-newsletter',
    component:Promotion,
    props:{newsletterPopup:false}
  }
]

也可以创建一个返回 props 的函数，可以将参数转换为其他类型，或者将静态值与基于路由的值相结合。如下：

const routes = [
  {
    path:'search',
    component:SearchUser,
    props:route => ({ query:route.query.q })
  }
]

访问 URL：/search?q=vue ，会将 {query:‘vue’} 作为prop 传递给 SearchUser 组件。
尽量保持 props 函数为无状态的，因为它只在路由更改时计算。

14.9 HTML 5 history 模式

前面的例子中使用的是 hash 模式，该模式是通过调用 createWebHashHistory() 函数创建的，这会在 URL 中使用 “#” 标识要跳转目标的路径，如果你觉得这样的 URL 很难看，影响心情，那么可以使用 HTML 5 history 模式。
HTML 5 history 模式是通过调用 createWebHistory() 函数创建的。如下：

import { createRouter,createWebHistory } from 'vue-router'
const router = createRouter({
  history:createWebHistory(),
  routes:[
    // ...
  ]
})

继续前面的例子，修改 router 目录下的 index.js 文件，将路由改为 HTML 5 history 模式。如下：

import { createRouter, createWebHistory } from 'vue-router'
// import Home from '@/components/Home'
import News from '@/components/News'
import Books from '@/components/Books'
import Videos from '@/components/Videos'
import Book from '@/components/Book'
// import books from '../assets/books'

export default createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      redirect: {
        name: 'news'
      }
    },
    {
      path: '/news',
      name: 'news',
      component: News,
    },
    {
      path: '/books',
      name: 'books',
      component: Books
    },
    {
      path: '/book/:id',
      name: 'book',
      components: {bookDetail: Book},
    },
    {
      path: '/videos',
      name: 'videos',
      component: Videos,
    },
  ]
})

再次运行项目，所有的 URL 都没有“#”了。如下：
在这里插入图片描述

不过 history 模式也有一个问题，当浏览器地址栏中直接输入 URL 或刷新页面时，因为该 URL 是正常的 URL，所以浏览器会解析该 URL 向服务器发起请求，如果服务器没有针对该 URL 的响应，就会出现 404 错误。

在 HTML 5 history 模式下，如果是通过导航链接来路由页面，Vue Router 会在内部截获单击事件，通过 JavaScript 操作 window.history 改变浏览器地址栏中的路径，在这个过程中并没有发起 HTTP 请求，所以就不会出现 404 错误。

如果使用 HTML 5 history 模式，那么需要在前端程序部署的 Web 服务器上配置一个覆盖所有情况的备选资源，即当 URL 匹配不到任何资源时，，返回一个固定的 index.html 页面，这个页面就是单页应用程序的主页面。

Vue Router 的官网给出了一些常用的 Web 服务器的配置，网址：https://router.vuejs.org/guide/essentials/history-mode.html

如果使用 Tomcat 作为前端程序的 Web 服务器，可以在项目根目录下新建 WEB-INF 子目录，在其下新建一个 web.xml 文件。代码如下：

<?xml version="1.0" encoding="UTF-8"?>
<web-app 
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
	xmlns="http://xmlns.jcp.org/xml/ns/javaee" 
	xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee 
						http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd" 
	id="WebApp_ID" version="4.0">
  	<error-page>
      <error-code>404</error-code>
      <location>/index.html</location>
    </error-page>
</web-app>

按照上述配置后，Tomcat 服务器就不会再返回 404 错误页面，对于所有不匹配的路径都会返回 index.html 页面。

提示：
在基于 Vue 脚手架项目的开发中，内置的 Node 服务器本身也支持 HTML 5 history 模式，所以开发时一般不会出现问题。

一只小熊猫呀
关注
专栏目录
路由&多视图单页应用&router-link相关属性
qq_64001795的博客
09-24 733
单页Web应用（single page application，SPA），就是只有一个Web页面的应用，是加载单个HTML页面，并在用户与应用程序交互时动态更新该页面的Web应用程序单页面应用程序：只有第一次会加载页面, 以后的每次请求, 仅仅是获取必要的数据.然后, 由页面中js解析获取的数据, 展示在页面中传统多页面应用程序：对于传统的多页面应用程序来说, 每次请求服务器返回的都是一个完整的页面优势减少了请求体积，加快页面响应速度，降低了对服务器的压力。
vue cl3、vuex、vue-router、ant design vue、axios搭建一个简易的单页面应用
01-20
使用vue、vuex、vue-router、ant design vue、axios搭建一个简易的单页面应用，页面风格样式使用ant design vue默认风格 1、有 登录页、人员列表、人员详情、人员编辑页面 2、所有页面需要有面包屑导
vue-router实现单页面路由原理
热门推荐
github_39532240的博客
03-14 1万+
本文参考总结于： 1、vue-router原理分析 - https://www.cnblogs.com/yanze/p/7644631.html 2、location.hash详解 - http://blog.csdn.net/baidu_31333625/article/details/54288223 3、使用HTML5的History API - https://www.cnblogs...
Vue--Router(路由)
最新发布
m0_63624484的博客
07-17 639
而且我们以前学过重定向等，也是页面跳转，我觉得区别就在于，路由是局部的页面切换。就是不会改变url重新加载一个网页，而是在一个网页上面显示不同的组件，你甚至可以控制这个新的页面切换在哪个位置。我们都知道，使用vue必然会涉及到很多个组件，也就是页面，而页面之间肯定需要切换，比如我点击一个按钮就需要切换另外一个组件(页面)，这就是路由的作用。③ 然后你需要在index.js文件中配置路由的信息，包括导入，配置组件路径，暴露路由等步骤，这这里我将简化后的模板总结出来了，可以直接导入按需求做修改。
十四、使用 Vue Router 开发单页应用（4）
走在bug的路上
12-10 2038
● 导航守卫 ○ 全局守卫 ○ 路由独享的守卫 ○ 组件内守卫 ○ 导航解析流程
单页面控制中心 vue-router
smiledawen的博客
06-12 540
1. 在router->index.js中，配置一个懒路由，定义页面加载哪个组件2. 在App.vue中，通过router-view组件，引入这个router注意，代码补全功能可以下载插件Auto Close Tag。
3-1 单页面路由vue-router
liuhao9999的博客
03-09 485
官网：https://router.vuejs.org/zh/ 安装 引入
vue-router单页面路由
12-07
准备路由 new VueRouter（）； 关联路由 map 启动路由 start(App,’#box’)；//第一个参数是准备的根组件，第二个参数是要捆绑的位置就是自己定义的id中 github上vue-router下载地址：...
vue2.0构建单页应用最佳实战
08-30
例如，将 VueRouter 和 VueResource 全局注册，定义路由，最后实例化 Vue，将根组件挂载到指定的 DOM 元素上。在 Vue 2.0 中，`el` 参数不再接受 `html` 或 `body`，而是指向具体的元素，以避免替换整个文档。 通过...
新手vue构建单页面应用实例代码
08-29
使用vue-router实现单页路由 在`router.js`文件中，配置路由规则： ``` import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) export default new Router({ routes: [ { path: '/', ...
三十分钟学会使用vue-router搭建单页应用（SPA）
越努力，越幸运！
10-11 1921
一、什么是单页应用 单页web应用（single page web application，SPA），就是只有一张Web页面的应用。单页应用程序 (SPA) 是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。浏览器一开始会加载必需的HTML、CSS和JavaScript，所有的操作都在这张页面上完成，都由JavaScript来控制。因此，对单页应用来说...
Vue Router：打造单页面应用（SPA）中流畅的导航和路由功能
Why_does_it_work的博客
07-16 2210
Vue Router是Vue.js官方提供的路由管理器。它可以帮助开发者构建单页面应用（SPA）并实现页面之间的导航功能。通过使用Vue Router，你可以定义不同URL路径与对应组件之间的映射关系，使得在浏览器地址栏发生变化时，能够动态地加载和渲染相应的组件，从而实现页面的无刷新切换。Vue Router是Vue.js官方提供的路由管理器，用于构建单页面应用（SPA）。它提供了一种简洁、灵活的方式来管理应用程序的路由，并实现页面之间的导航和切换。
十四、使用 Vue Router 开发单页应用（1）
走在bug的路上
12-04 1580
● 感受前端路由 ○ HTML 使用路由 ○ 模块开发使用路由
探索Vue Router：构建高效单页面应用的指南
a3098448071的博客
07-05 1429
动态路径参数以冒号开头，它们类似于正则表达式的占位符，用于捕获 URL 的一部分。routes: [// 动态路径参数以冒号开始});在这个例子中，任何形式的/user/x都会映射到同一个路由，其中x可以是任何值。当匹配到路由时，x的值会被存储在中。Vue Router 是 Vue.js 的官方路由管理器，为构建单页面应用（SPA）提供支持。它通过定义路由规则，将 URL 映射到不同的组件，实现页面内容的动态渲染和切换，而无需重新加载页面安装 | Vue Router。
使用Vue Router构建单页应用：从入门到进阶
weixin_52938153的博客
05-21 482
Vue Router 是 Vue.js 官方的路由管理器。它集成了 Vue.js 的核心功能，能够帮助我们轻松实现单页应用（SPA）的多视图切换和导航。我们可以在路由定义中添加meta字段来定义路由的元信息。在上面的代码中，我们为根路径添加了一个的元信息。我们可以在路由路径中使用冒号来定义动态参数。在上面的代码中，/user/:id路径中的:id是一个动态参数，它将匹配任意用户 ID。我们可以在路由配置中使用children属性来定义子路由。
Vue学习：路由（实现单页面应用SPA）
weixin_47295886的博客
03-09 128
原始html中我们使用a标签实现页面的跳转 --》 Vue中借助router-link标签实现路由的切换。安装vue-router：指定版本 自己的脚手架支持上什么版本要查资料。active-class="active" 激活的样式实现高亮效果。指定组件的呈现位置router-view。替换：a --》router-link。局部刷新--改变路径 不全部刷新。对于实例上，产生了router。点击 页面回刷新：多页面内容。使用需要你创建router，
十四、使用 Vue Router 开发单页应用（6）
走在bug的路上
12-14 1384
● 延迟加载路由 ● 等待导航结果 ● 动态路由 ○ 添加路由 ○ 在导航守卫中添加路由 ○ 删除路由 ○ 添加嵌套路由 ○ 查看现有路由
浅谈前端SPA（单页面应用）
weixin_30624825的博客
08-20 196
单页Web应用（single page web application，SPA）： SPA 是一种特殊的 Web 应用，是加载单个 HTML 页面并在用户与应用程序交互时动态更新该页面的。它将所有的活动局限于一个 Web 页面中，仅在该 Web 页面初始化时加载相应的 HTML 、 JavaScript 、 CSS 。一旦页面加载完成， SPA...
使用Vue 2.0和Vue-router搭建单页应用教程
本文主要介绍了如何使用Vue 2.0和Vue-router构建一个简单的单页应用，包括Vue.js的基本介绍、环境搭建步骤以及开发过程。 Vue.js是一个非常流行的前端框架，它结合了Angular.js和React.js的优势，同时避免了它们的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一只小熊猫呀

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值