第三十二节:Vue路由: Vue-router根本配置与利用

手机游戏开发者 · 2024-9-10 01:50:23

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的焦点深度集成，让构建单页面应用变得轻而易举.

1. Vue路由的安装和配置

1.1 安装vue路由

npm install vue-router --save-dev2.2 配置vue路由

// 1\. 导入路由并利用import Vue from 'vue' // 导入vuerouter import VueRouter from 'vue-router'; // 使勤奋能VueRouter插件Vue.use(VueRouter) // 2\. 创建路由实例,并配置路由映射// 2.1 创建路径与组件的映射关系let routes = [ { path:'/home', component: Home }, { path:'/list', component: List }, { path:'/about', component: About }] // 2.2 创建路由实例var router = new VueRouter({ // 配置路由 routes,}) // 3\. 将配置好的路由在Vue实例中利用 new Vue({ el:'#app', router })2. 路由的根本概念

路由中有三个根本的概念route,routes,router.

route, 它是一条路由,就是一个路径和组件的映射关系
// route { path:'/', component: Home}
routes 是一组路由，把每条route的路由组合起来，形成一个数组。
routes:[ { path:'/', component: Home }, { path:'/list', component: List } ]
router 是一个路由机制，相称于一个管理者，他来管理路由。由于routes只是界说了一组路由，也就是一组路径和组件的对应关系,当用户点击了按钮,改变一个路径,router会更加路径处置处罚差别组件
var router = new VueRouter({ // 配置路由 routes:[...] })

3. 路由的根本利用

3.1 内置的两个组件

router-link组件阐明:

router-link是vue-router已经注册好的组件,直接利用就可以了
router-link是用来切换路由的,通过to属性来跳转到指定的路由
router-link在编译的时间会主动被编译为a标签,可以利用tag属性指定编译为你要的标签

router-view组件阐明:

router-view用来指定当前路由所映射的组件表现的位置
router-view可以明白为占位符,为路由映射的组件占位,差别路由映射的组件通过更换表现
和动态组件的效果雷同

利用展示:
  <router-link to="/home">首页</router-view> <router-link to="/list">列表</router-view> <router-link to="/about">关于作者</router-view>  <router-view></router-view>4. 路由利用示例:

4.1 示例目次

4.2 源码部分

4.2.1 组件相关:

Home组件
文件: components => Home.vue
<template> <div id="home">       <h2>首页</h2>       <div>这就是首页</div>    </div></template><script> export default {       name:"Home" }</script><style> #home{       color:#fff;       text-align:center; } h2{       font-size:40px;       line-height: 80px; }</style>List组件
文件: components => List.vue
<template> <div id="list">       <h2>列表页</h2>       <div>这就是列表页</div> </div></template><script> export default {       name:"List" }</script><style> #list{       color:#fff;       text-align:center; } h2{       font-size:40px;       line-height: 80px; }</style>About组件
文件: components => About.vue
<template> <div id="about">       <h2>关于作者</h2>       <div>这就是关于作者页</div> </div></template><script> export default {       name:"About" }</script><style> #about{       color:#fff;       text-align:center; } h2{       font-size:40px;       line-height: 80px; }</style>4.2.2 界说和配置路由关系

路由:
文件: router => index.js
// 1\. 导入模块import Vue from 'vue';import VueRouter from 'vue-router';// 2\. 利用VueRouter插件Vue.use(VueRouter)// 3\. 导入组件import Home from '../components/Home';import List from '../components/List';import About from '../components/About';// 4\. 配置路由与组件映射关系let routes = [ {       path:'/home',       component: Home }, {       path:'/list',       component: List }, {       path:'/about',       component: About }]// 5.实例化路由const router = new VueRouter({ routes})export default router4.2.3 利用路由

利用路由举行页面跳转
文件: App.vue
<template> <div id="app">       <div通过示例:我们发现vue路由默认利用的是hash路由
5. 路由的配置

5.1 根路由配置

上面的示例中,我们在配置路由映射的时间,这配置了/home,/list,/about三条路由,
如图:

但是我们在每次打开页面是,默认访问的路径是/,这条路径并没有映射任何组件内容,
因此router-view组件占位的地方不会表现任何内容
因而我们必要配置根路由表现的内容
有两种办理方案,
5.1.1 配置路由组件

第一种就是配置根路由/表现的组件,如下
{ path:"/", component: Home, },路由表
表现效果
5.1.2 配置路由重定向

利用redirect字段配置路由重定向
{ path:"/", // 路由重定向: // 虽然访问的是/根路由,但是主动重新转义到/home路由 redirect: "/home" },路由表:
表现效果:
保举利用重定向的配置方法.
5.2 路由模式

上一节有提到过,前端路由的实现有两种方案,一种是通过hash值,一种是通过H5 的history.
但是Vue路由默认利用hash模式.
如图:

hash路由中#看起来多多少少有点别扭.我们就像利用history模式,那要怎么设置呢
VueRouter配置项中处置处罚提供一个routes用来配置路由映射表,还提供了一个mode选项用来配置路由模式
路由模式配置:
路由表现样式:

第三十二节:Vue路由: Vue-router根本配置与利用

浏览过的版块

所属分类: 问答交流

新帖推荐: 30日

推荐作品