VUE 入门及应用 ( 路由 router )-FreeNAS中文网

admin 管理员组

文章数量: 887609

6.前端路由 router

Vue Router | Vue.js 的官方路由 (vuejs)

官方地址 : https://router.vuejs/zh/

6.1.基本配置

6.1.0.准备 MyPage.vue

创建用于测试 vue文件 ../views/MyPage.vue

<template>
  <div>
    <h1>MyPage</h1>
  </div>
</template>

<script >

</script>

<style scoped lang="scss">

</style>

6.1.1.基本配置

src / router / index.js 路由文件

const routes = [
    {
    	path: '请求路径',
    	name: '名称',
    	component: 对应组件, 需要引入组件
  	},
    ...
]

如果想引入新的资源, 写好First.vue 文件

先在 src / router / index.js 路由文件中添加引入组件

// 引入 组件
import MyPage from '../views/MyPage.vue'

再增加路由信息

{
    path: '/myPage',
    name: 'myPage',
    component: MyPage,
},

6.1.2.导航标签/显示标签

<router-link to="/path" >说明</router-link> 导航标签, 相当于html中的 <a> , 其中的 to 属性相当于 href 属性

<router-view></router-view> 显示标签, 相当于 html中的 <iframe> 用于显示

在 App.vue 页面中应用

<template>
  <div id="app">
      <!-- 导航, router-link  相当于<a>  to属性 相当于 href -->
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> |
      <router-link to="/myPage">MyPage</router-link>
    </div>
      <!-- 显示区, 根据导航显示不同的内容 -->
    <router-view></router-view>
  </div>
</template>

6.2.子路由(多级路由/嵌套路由)

6.2.1.创建两个vue文件

在 src / views 中添加两个 vue 文件

/views/Page1.vue Page1.vue

<template>
  <div>
    <h1>page1</h1>
  </div>
</template>

<script >

</script>

<style scoped lang="scss">

</style>

/views/Page1.vue Page2.vue

<template>
  <div>
    <h1>page2</h1>
  </div>
</template>

<script >

</script>

<style scoped lang="scss">

</style>

6.2.2.配置子路由

修改 src / router / index.js 路由文件中添加引入组件

import Page1 from '@/views/Page1.vue'
import Page2 from '@/views/Page2.vue'

修改路由配置, 增加 children 属性 ,

注意子路由配置 path 时, 前面没有 / 斜杠 page1 , page2

也可以写全路径 /myPage/page1 , /myPage/page2

  {
    path: '/myPage',
    name: 'myPage',
    component: MyPage,
    children:[
      {
        path: 'page1',
        name: 'Page1',
        component: Page1,
      },
      {
        path: 'page2',
        name: 'Page2',
        component: Page2,
      }
    ]
  },

6.2.3.修改 MyPage.vue 文件

在 MyPage.vue 文件中

增加用于路由跳转的 <router-link></router-link> 及用于显示的 <router-view></router-view>

<template>
  <div>
    <h1>MyPage</h1>

    <div >
      <div style="float: left; width: 200px; height: 500px; background: aliceblue;">
        <div id="nav">
          <router-link to="/myPage/page1" active-class="active">页面1</router-link>
          <br/> <br/>
          <router-link to="/myPage/page2" active-class="active">页面2</router-link>
        </div>
      </div>
      <div   style="float: left; width: 800px; height: 500px; background: #eeeeee; border-radius: 5px;"  >
        <router-view></router-view>
      </div>
    </div>

  </div>
</template>

<style scoped lang="scss">
.active {
  color: red;
}
</style>

6.3.相关概念

6.3.1.两种工作模式

在 Vue.js 中，Vue Router 提供了两种不同的路由模式：hash 和 history。

6.3.1.1.Hash 模式：

当使用 hash 模式时，URL 的路径部分会包含一个 #（哈希）符号，以及随后的路由标识符。例如，http://example/#/user/home。
#（哈希）符号后面的内容不会在请求时发给服务器
浏览器通过监听 hashchange 事件来检测 URL 哈希值的变化，并且由于哈希变化不会导致页面重新加载，所以这种模式对旧版浏览器兼容性较好。

在 Vue Router 中配置为 hash 模式的方法是：

const router = new VueRouter({
  mode: 'hash',
  routes: [...]
});

6.3.1.2.History 模式：

History 模式利用 HTML5 History API 来实现 URL 路径的变化，这样生成的 URL 就像正常的页面 URL，没有 # 符号。例如，http://example/user/home。
使用此模式时，当用户点击浏览器的前进、后退按钮或者直接修改地址栏中的 URL，Vue Router 可以监听到这些变化并作出相应调整。
然而，为了使服务器能够正确处理这些 URL 请求而不返回 404 错误，在部署应用时需要配置服务器，使其将所有未命中静态资源请求都指向应用的入口文件（通常是 index.html）。

在 Vue Router 中配置为 history 模式的方法是：

const router = new VueRouter({
  mode: 'history',
  routes: [...]
});

总结来说，hash 模式简单易用，但 URL 显示不够优雅；history 模式提供更自然的 URL 结构，但需要额外的服务器端配置支持。

根据项目需求和开发环境选择合适的路由模式。

6.3.2.路由对象

route : 表示一条路由, 就是一组标识 key ( 路径path ) 对应一组组件 component 或者函数 function

route 对象表示当前活动的路由信息。当你导航到应用中的某个路径时，Vue Router 会解析这个 URL，并创建一个对应的 route 对象。
这个对象包含了从 URL 解析出的详细信息，如：path（当前路由路径）、params（动态路由参数）、query（查询参数）、name（命名路由的名字）等。
在 Vue 组件内部，可以通过 this.$route 访问当前活跃的 route 对象。
routes 表示一组路由

6.3.3.路由器

router : 它是一个机制, 充当管理路由的管理者角色.

router 是一个全局可用的 Vue Router 实例，它是整个应用路由系统的管理者和控制中心。
通过调用 Vue.use(VueRouter) 安装路由插件后，我们可以创建并配置一个 router 实例，定义应用的所有路由规则以及他们的组件映射、嵌套路由、重定向、命名路由等功能。
router 提供了许多方法来操纵应用程序的路由状态，比如：
- router.push(location)：将当前位置更改为给定的新位置。
- router.replace(location)：类似于 push，但是不会向历史记录添加新条目。
- router.go(n)：在浏览器的历史记录中向前或向后移动指定的步数。
- router.resolve(location)：解析给定的位置，返回一个描述如何到达该位置的对象。
我们通常在 Vue 应用初始化阶段通过 new VueRouter() 创建 router 实例，并将其注入到根 Vue 实例的 router 属性上。
this.$router 表示全局路由器对象

6.3.4.vue文件分类

组件 : 在vue文件中通过 import导入, 并使用 components 声明的通常当成组件, 存放在 components 文件中

页面 : 通过路由访问的vue文件通常当成页面, 存放在 views , pages 等文件夹中

6.4.路由传值

6.4.1.query方式

query方式，可以在地址栏可以看到参数 , 相当于url?传参

6.4.1.1.基本写法

在 /views/AboutView.vue 增加两组 <router-link> 标签 ,

分别以字符串及json 格式进行传参

    <router-link to="/myPage?id=123&title=标题">MyPage query</router-link>
    <br>
    <router-link :to="{
      path: '/myPage',
      query: {
        id: 123,
        title: '标题'
      }
    }">MyPage query json</router-link>

在 /views/MyPage.vue 的 mounted 函数中通过 this.$route 接收传递来的值

mounted() {
    console.log(this.$route)
}

可以在控制台可以看到 query打印内容

fullPath: "/myPage?id=123&title=%E6%A0%87%E9%A2%98"
hash: ""
matched: [{…}]
meta: {}
name: "myPage"
params: {}
path: "/myPage"
query: {id: '123', title: '标题'}
[[Prototype]]: Object

6.4.1.2.传对象信息

在 /views/AboutView.vue 增加 data信息

dd 对象 , 包括 id, title 两个属性

data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      dd:{
        id: 666,
        title: '对象的标题'
      }
    }
  }

在 template 中增加新的 <router-link> 标签 ,

并使用`` 反引号` 进行模板接值

 <br>
<router-link :to="`/myPage?id=${dd.id}&title=${dd.title}`">MyPage query dd</router-link>

这样就可以传递动态信息

6.4.2.params

params方式，在地址栏看不到参数

但要在路由的 index.js 文件中 path属性后面追加 :标识 用于设置传值的标识

6.4.2.0.准备MyPage2.vue

增加新的 /views/MyPage2.vue 文件

<template>
  <h1>MyPage2</h1>
</template>
<script >
  export default {
    name: 'MyPage2',
    mounted() {
      console.log(this.$route)
    }
  }
</script>

在路由的 index.js 文件中引入文件

import MyPage2 from '../views/MyPage2.vue'

增加路由配置, 在路由后追加了 :id , :title

{
 	path: '/myPage2/:id/:title',
    name: 'myPage2',
    component: MyPage2,
},

6.4.2.1.基本写法

在 /views/AboutView.vue 增加 <router-link> 标签 ,

<br>
<router-link :to="`/myPage2/${dd.id}/${dd.title}`">MyPage2 params </router-link>

在 /views/MyPage2.vue 的 mounted函数中通过 this.$route 接收传递来的值

可以在控制台看到, params 接收到值

fullPath: "/myPage2?id=123&title=%E6%A0%87%E9%A2%98"
hash: ""
matched: [{…}]
meta: {}
name: "myPage2"
params: {id: '666', title: '对象的标题'}
path:"/myPage2/666/对象的标题"
query: {}
[[Prototype]]: Object

6.4.2.2.params 对象传值

在 /views/AboutView.vue 增加 <router-link> 标签 , 通过json 格式传值

这里要注意在使用 params 传值时 , 要使用 name 来设置路由目标

<br>
<router-link :to="{
                  name: 'myPage2',
                  params: {
                  	id: dd.id,
                  	title: dd.title
                  }
                }">MyPage2 params json</router-link>

6.4.3.props

在路由的index.js 文件中通过 props 来设置接值

6.4.3.0.准备MyPage3.vue

增加新的 /views/MyPage3.vue 文件

<template>
  <h1>MyPage3</h1>
</template>
<script >
  export default {
    name: 'MyPage3',
    mounted() {
      console.log(this.$route)
    }
  }
</script>

在路由的 index.js 文件中引入文件

import MyPage3 from '../views/MyPage3.vue'

增加路由配置, 在路由后追加了 :id , :title

{
 	path: '/myPage3',
    name: 'myPage3',
    component: MyPage3,
},

6.4.3.1. 值为对象

该对象中的所有key-value都会以props的形式传给目标组件

修改路由index.js中的配置:

{
        path: '/myPage3',
        name: 'myPage3',
        component: MyPage3,
        props:{id:1,title:'hello'}
}

在 /views/MyPage3.vue 文件增加 props 接值

<template>
  <div>
    <h1>MyPage3</h1>

    <h2>{{id}}</h2>
    <h2>{{title}}</h2>
  </div>

</template>
<script >
  export default {
    name: 'MyPage3',
    props: ["id", "title"],

    mounted() {
      console.log(this.$route)
    }
  }
</script>

这种方式只能接收到配置文件中的固定值

6.4.3.2.值为布尔值

若布尔值为真，就会把该路由组件收到的所有params参数，以props的形式传给目标组件。

修改路由index.js 文件配置

{
        path: '/myPage3/:id/:title',
        name: 'myPage3',
        component: MyPage3,
        props:true
}

在 /views/AboutView.vue 增加 <router-link> 标签 ,

<br>
<router-link :to="`/myPage3/${dd.id}/${dd.title}`">MyPage3 params </router-link>

这里注意只能针对 params 传值方式有效

6.4.3.3.值为函数

通过函数参数进行传值 , 这时对 query, params 参数都可以转换成 props 信息

修改路由index.js 文件配置

{
        path: '/myPage3/:id/:title',
        name: 'myPage3',
        component: MyPage3,
		props($route){
     		return {
             id:$route.params.id,
             title:$route.params.title,
    	 }
 		}
 }

6.5.编程式路由

编程式路由是指通过编程( js 代码 )的方式来操作和控制路由的跳转

6.5.1.push

this.$router.push(path) : 该方法用于将当前历史记录推入一个新条目。调用 router.push 会将应用从当前路径跳转到指定的新路径。

6.5.1.1.基本跳转

在 /views/AboutView.vue 增加 <button> 按钮并增加事件

<br>
<button @click="goMyPagePush">转到 MyPage  push</button>

在 methods 中增加处理函数

 methods: {
    goMyPagePush(){
      this.$router.push('/myPage')
    }
  }

6.5.1.2.跳转query传值

在 /views/AboutView.vue 增加 <button> 按钮并增加事件

<br>
<button @click="goMyPagePush2">转到 MyPage  push 2</button>

在 methods 中增加处理函数

goMyPagePush2(){
    this.$router.push({
        path: '/myPage',
        query: {
            id: 123,
            title: '标题'
        }
    })
},

6.5.1.3.跳转params传值

在 /views/AboutView.vue 增加 <button> 按钮并增加事件

<br>
<button @click="goMyPage2Push3">转到 MyPage2  push 3</button>

在 methods 中增加处理函数, 这里可以使用name , 也可以使用 path

goMyPage2Push3(){
    this.$router.push({
        // name: 'myPage2',
        path: '/myPage2/:id/:title',
        params: {
            id: 123,
            title: '标题'
        }
    })
},

6.5.2.replace

类似于 push，但它不会向浏览器的历史栈添加新的记录，而是替换当前的记录。

6.5.2.1.测试跳转

在 /views/AboutView.vue 增加 <button> 按钮并增加事件

<br>
<button @click="goMyPageReplace">转到 MyPage replace</button>
<br>
<button @click="goMyPageReplace2">转到 MyPage  replace 2</button>
<br>
<button @click="goMyPage2Replace3">转到 MyPage2  replace 3</button>

在 methods 中增加处理函数, 这里可以使用name , 也可以使用 path

goMyPageReplace(){
    this.$router.replace('/myPage')
},
goMyPageReplace2(){
    this.$router.replace({
        path: '/myPage',
        query: {
            id: 123,
            title: '标题'
        }
	})
},
goMyPage2Replace3(){
    this.$router.replace({
        // name: 'myPage2',
        path: '/myPage2/:id/:title',
            params: {
            id: 123,
            title: '标题'
        }
    })
}

6.5.3.比较

this.$router.push 和 this.$router.replace 都是 Vue Router 提供的编程式导航方法，用于在单页面应用中进行路由切换。它们的主要区别在于浏览器历史记录和后退操作：

this.$router.push()
- 当调用 this.$router.push(path) 或 this.$router.push({ path: '...' }) 时，会将当前路由添加到浏览器的历史栈中。
- 这意味着用户点击浏览器的“后退”按钮时，他们将返回到之前的页面。
this.$router.replace()
- 而当调用 this.$router.replace(path) 或 this.$router.replace({ path: '...' }) 时，不会向浏览器的历史栈添加新的条目。
- 相反，它会替换当前的路由条目，因此当用户点击“后退”按钮时，他们将直接跳转到上一个（再上一个）页面，而不是回到使用 replace 方法替换掉的那个页面。

总结来说：

如果你希望用户的导航动作可以回溯，就使用 push。
如果你想实现类似于重定向的效果，使得新页面加载后用户不能通过点击后退按钮返回原页面，则使用 replace。

6.5.4.历史跳转

类似于 BOM中的 history

vue-two/src/views/MyPage.vue

在 /views/MyPage.vue 增加 <button> 按钮并增加事件

<div>
    <button @click="goBackGo">go(-1)</button>
    <button @click="goBack">back</button>
    <button @click="goForward">forward</button>
    <button @click="goForwardGo">go(1)</button>
</div>

在 methods 中增加处理函数, 测试可知与浏览器的前进后退按钮产生相同的效果

methods: {
    goBack() {
        this.$router.back()
    },
    goForward() {
        this.$router.forward()
    },
    goBackGo() {
        this.$router.go(-1)
    },
    goForwardGo() {
        this.$router.go(1)
    }
}

6.6.路由缓存及事件

6.6.1.`<keep-alive>`标签

默认情况下 , 当切换路由后, 原有组件是被销毁的

6.6.1.1.销毁前函数监听

修改 /views/Page1.vue 增加 name组件名及销毁前函数

<template>
  <div>
    <h1>page1</h1>
  </div>
</template>

<script >
  export default {
    name: 'Page1',
    beforeDestroy() {
      console.log('page1 beforeDestroy')
    },
  }
</script>

修改 /views/Page2.vue 增加 name组件名及销毁前函数

<template>
  <div>
    <h1>page2  <input type="text"> </h1>
  </div>
</template>

<script >
  export default {
    name: 'Page2',
    beforeDestroy() {
      console.log('page2 beforeDestroy')
    },
  }
</script>

在 MyPage.vue 组件中点击 page1, page2 进行切换时, 发现每一次切换对应的组件都会调用销毁前函数

6.6.1.2.`<keep-alive>`标签

修改在 /views/MyPage.vue 组件, 在显示标签 <router-view></router-view> 外增加 <keep-alive>标签

 <keep-alive  >
   <router-view></router-view>
 </keep-alive>

然后再测试, 就会发现点击 page1, page2 进行切换时, 不会再调用销毁前函数, 表明page1, page2 两个组件并没有被销毁

6.6.1.3. include , exclude 属性

在 <keep-alive>标签上可以增加 include , exclude 属性, 分别来指定哪些组件需要缓存或不需要缓存

属性的值为各组件的名

多个使用, 连接

只对 Page1 组件进行缓存

<keep-alive  include="Page1" >
	<router-view></router-view>
</keep-alive>

不对 Page1组件进行缓存

<keep-alive  exclude="Page1">
<router-view></router-view>
</keep-alive>

6.6.2.缓存路由事件

当一个不被销毁的组件, 被激活, 或者失活时, 分别对应两个钩子函数

activated() {
    // 激活函数
  console.log('page1 activated')
},
deactivated() {
    // 失活函数
  console.log('page1 deactivated')
}

6.7.路由守卫(拦截器)

Vue 2 中提供了多种路由守卫（Route Guards），它们是钩子函数，允许在路由切换的过程中进行拦截，

根据需要决定是否允许导航发生、如何发生以及在导航完成后执行特定的操作。

6.7.1.前置守卫

也叫, 全局前置守卫：在编写在路由index.js文件中

router.beforeEach((to, from, next) => {})
这个守卫发生在每次路由即将改变前，参数 to 和 from 分别表示目标路由和当前路由对象，而 next 是一个函数，调用它才能进行下一步操作。
可以使用 next() 来继续导航，next(false) 来取消当前导航，或 next('/other/path') 跳转到其他路径。

//全局前置路由守卫————初始化的时候被调用、每次路由切换之前被调用
router.beforeEach((to,from,next)=>{
    console.log('前置路由守卫',to,from)
    if(to.query.id == null ){ //判断条件
        console.log('跳转时没有传id')
        next()
    }else{
        next(false)
    }
})

判断跳转时, 是否向目标组件以 query形式传递 id , 没有可以继续跳转, 传递了就不能跳转

6.7.2.全局解析守卫

全局解析守卫：

router.beforeResolve((to, from, next) => {})
类似于 beforeEach，但会在所有异步依赖项完成之后，但在渲染之前被调用，适合处理异步数据获取并基于这些数据决定是否继续导航。

6.7.3.后置守卫

也叫, 全局后置守卫：

router.afterEach((to, from) => {})
这个守卫发生在每次路由切换成功之后，不支持中断，主要用于记录路由历史、页面标题设置等操作。

//全局后置路由守卫————初始化的时候被调用、每次路由切换之后被调用
router.afterEach((to,from)=>{
    console.log('后置路由守卫',to,from)
    console.log('跳转成功后 做点什么')
})

6.7.4.独享守卫

6.7.4.0.meta 属性

Meta 字段是在 Vue Router 路由配置中使用的一个可选属性，它允许开发者附加额外的数据或元信息到路由上，

这些信息可以用于控制诸如页面标题、权限验证、菜单显示等应用场景。

在路由配置中，meta 字段可以是一个对象，包含了任意键值对, 如：

const routes = [
  {
    path: '/admin',
    component: AdminPanel,
    meta: {
      title: '管理员面板', // 用于设置页面标题
      requiresAuth: true, // 表示该路由需要用户登录后才能访问
      adminOnly: true, // 只有管理员角色才能访问
      icon: 'settings' // 用于侧边栏菜单图标的名称
    }
  },
  // 其他路由...
]

之后，可以通过这些元信息在你的应用中执行相应的逻辑，比如在全局导航守卫（Navigation Guards）、布局组件、Vuex 状态管理器或其他任何地方获取并利用这些元信息。

6.7.4.1.独享前置守卫实例

也叫 , 路由独享前置守卫：写在路由配置项中

通常在定义路由时，在路由配置的 meta 字段中添加自定义属性，并在路由文件或者全局路由配置的地方使用 beforeEnter 守卫：

{
    path: 'page1',
    name: 'Page1',
    component: Page1,
    meta:{isAuth:false},
    beforeEnter: (to, from, next) => {
        console.log('独享路由守卫',to,from)
        if(to.meta.isAuth){ //判断是否需要鉴权
            next()
        }else{
            next(false)
        }
    }
},

6.7.5.组件内守卫

编写在组件内的钩子函数

6.7.5.1.组件内的路由进入守卫：

使用 beforeRouteEnter 生命周期钩子：进入该组件时被调用

先在路由 index.js 文件中为 MyPage2组件增加 meta属性

{
    path: '/myPage2/:id/:title',
    name: 'myPage2',
    component: MyPage2,
    meta:{isAuth:true}
}

再在 MyPage2 组件中增加钩子函数, 进入到当前组件时调用

//通过路由规则，进入该组件时被调用
beforeRouteEnter (to, from, next) {
    console.log('About--beforeRouteEnter',to,from)
    // 不可以直接访问 this，因为此时组件实例还没创建
    // 可以通过传入回调函数来访问组件实例
    if(to.meta.isAuth){
        next(v=>{
            console.log("next-route:", v.$route)
        })
    }else{
        next(false)
    }
},

6.7.5.2.组件内的路由更新守卫：

当路由改变导致组件复用且组件对应的路由参数发生变化时触发：

beforeRouteUpdate(to, from, next) {
    // 在这个钩子中，可以访问组件实例 `this`
    // 并可以对响应式数据进行更改
    console.log(this.$route)
    next();
},

6.7.5.3.组件内的路由离开守卫：

在导航离开该组件的对应路由时触发：

 //通过路由规则，离开该组件时被调用
beforeRouteLeave(to, from, next) {
    // 确保在用户离开前保存数据或取消某项操作
    const answer = window.confirm('是否想离开?');
    if (answer) {
        console.log('About--beforeRouteLeave',to,from)
        next();
    } else {
        next(false);
    }
},

6.7.5.组件内守卫

编写在组件内的钩子函数

6.7.5.1.组件内的路由进入守卫：

使用 beforeRouteEnter 生命周期钩子：进入该组件时被调用

先在路由 index.js 文件中为 MyPage2组件增加 meta属性

{
    path: '/myPage2/:id/:title',
    name: 'myPage2',
    component: MyPage2,
    meta:{isAuth:true}
}

再在 MyPage2 组件中增加钩子函数, 进入到当前组件时调用

//通过路由规则，进入该组件时被调用
beforeRouteEnter (to, from, next) {
    console.log('About--beforeRouteEnter',to,from)
    // 不可以直接访问 this，因为此时组件实例还没创建
    // 可以通过传入回调函数来访问组件实例
    if(to.meta.isAuth){
        next(v=>{
            console.log("next-route:", v.$route)
        })
    }else{
        next(false)
    }
},

6.7.5.2.组件内的路由更新守卫：

当路由改变导致组件复用且组件对应的路由参数发生变化时触发：

beforeRouteUpdate(to, from, next) {
    // 在这个钩子中，可以访问组件实例 `this`
    // 并可以对响应式数据进行更改
    console.log(this.$route)
    next();
},

6.7.5.3.组件内的路由离开守卫：

在导航离开该组件的对应路由时触发：

 //通过路由规则，离开该组件时被调用
beforeRouteLeave(to, from, next) {
    // 确保在用户离开前保存数据或取消某项操作
    const answer = window.confirm('是否想离开?');
    if (answer) {
        console.log('About--beforeRouteLeave',to,from)
        next();
    } else {
        next(false);
    }
},

6.8.重定向 redirect

Vue Router 中的重定向主要用于将一个路由地址自动转换为另一个路由地址，当用户尝试访问第一个路由时，实际上会被导航至重定向后的目标路由。

6.8.0.准备

增加新的 /views/MyPage2.vue 文件

<template>
  <div>
    <h1>MyPage4</h1>
  </div>

</template>
<script >
  export default {
    name: 'MyPage4',
    mounted() {
      console.log(this.$route)
    }
  }
</script>

在路由的 index.js 文件中引入文件

import MyPage4 from '../views/MyPage4.vue'

增加路由配置, 在路由后追加了 :id , :title

{
    path: '/myPage4',
    name: 'myPage4',
    component: MyPage4
},

在 /views/AboutView.vue 增加 <router-link> 标签 ,

<br>
<router-link :to="`/myPage4`">MyPage4 redirect </router-link>

6.8.1.基于路径的重定向

当用户访问特定路径时，将其引导至新的路径。

修改 myPage4 路由信息增加 redirect 属性：

{
    path: '/myPage4',
    name: 'myPage4',
    component: MyPage4,
    redirect: '/myPage'
},

当访问 /myPage4 时，会被重定向到 /myPage。

6.8.2.基于命名路由的重定向

也可以根据命名路由进行重定向，这对于维护具有逻辑名称的路由特别有用。

{
    path: '/myPage4',
    name: 'myPage4',
    component: MyPage4,
    redirect: { name: 'myPage2' }  
}

当访问 /myPage4 时，会被重定向到命名为 myPage2 的目标上

6.8.3.条件重定向

有时重定向可能依赖于某些条件，例如用户权限等。

在这种情况下，可以使用独享守卫实现动态重定向。

{
        path: '/myPage4',
        name: 'myPage4',
        component: MyPage4,
        meta:{isAuth: true},
        beforeEnter: (to, from, next) => {
            if (to.meta.isAuth) { //
                next('/myPage3');
            } else {
                next();
            }
        }
    }

通过 mate 中传递 isAuth 属性来 , 限制跳转的方向 , 如果为 true 则跳转到 /myPage3 , 如果是false 则跳转到 MyPage4

本文标签：路由入门 Vue router

版权声明：本文标题：VUE 入门及应用 ( 路由 router ) 内容由网友自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1735082541h1699616.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。

技术交流 – FreeNAS中文网

VUE 入门及应用 ( 路由 router )

6.前端路由 router

6.1.基本配置

6.1.0.准备 MyPage.vue

6.1.1.基本配置

6.1.2.导航标签/显示标签

6.2.子路由(多级路由/嵌套路由)

6.2.1.创建两个vue文件

6.2.2.配置子路由

6.2.3.修改 MyPage.vue 文件

6.3.相关概念

6.3.1.两种工作模式

6.3.1.1.Hash 模式：

6.3.1.2.History 模式：

6.3.2.路由对象

6.3.3.路由器

6.3.4.vue文件分类

6.4.路由传值

6.4.1.query方式

6.4.1.1.基本写法

6.4.1.2.传对象信息

6.4.2.params

6.4.2.0.准备MyPage2.vue

6.4.2.1.基本写法

6.4.2.2.params 对象传值

6.4.3.props

6.4.3.0.准备MyPage3.vue

6.4.3.1. 值为对象

6.4.3.2.值为布尔值

6.4.3.3.值为函数

6.5.编程式路由

6.5.1.push

6.5.1.1.基本跳转

6.5.1.2.跳转query传值

6.5.1.3.跳转params传值

6.5.2.replace

6.5.2.1.测试跳转

6.5.3.比较

6.5.4.历史跳转

6.6.路由缓存及事件

6.6.1.<keep-alive>标签

6.6.1.1.销毁前函数监听

6.6.1.2.<keep-alive>标签

6.6.1.3. include , exclude 属性

6.6.2.缓存路由事件

6.7.路由守卫(拦截器)

6.7.1.前置守卫

6.7.2.全局解析守卫

6.7.3.后置守卫

6.7.4.独享守卫

6.7.4.0.meta 属性

6.7.4.1.独享前置守卫实例

6.7.5.组件内守卫

6.7.5.1.组件内的路由进入守卫：

6.7.5.2.组件内的路由更新守卫：

6.7.5.3.组件内的路由离开守卫：

6.7.5.组件内守卫

6.7.5.1.组件内的路由进入守卫：

6.7.5.2.组件内的路由更新守卫：

6.7.5.3.组件内的路由离开守卫：

6.8.重定向 redirect

6.8.0.准备

6.8.1.基于路径的重定向

6.8.2.基于命名路由的重定向

6.8.3.条件重定向

更多相关文章

android手机连不上wifi密码,修改wifi密码后手机连不上_修改wifi密码后手机不能上网-192路由网...

黑客入门——最好用的渗透测试工具

不会真的有人看不懂 Linux 小白都能看懂的大数据入门（一） 图文

Debian 入门安装与配置1

Linux入门基础

目前全网最详细的树莓派 Pico入门指南！

dvwa页面打不开的原因_路由器管理页面打不开怎么办？ | 192路由网

Cisco Packet Tracer的路由设置与相关协议的使用

[Win]python入门安装教程

解锁ChatGPT新姿势：从入门到进阶使用指南

vue,uniapp,js获取视频第一帧图片作为封面图

编辑器之神Vim5分钟入门

如何设置无线路由连接无线wifi

6.6.1.`<keep-alive>`标签

6.6.1.2.`<keep-alive>`标签

不会真的有人看不懂 Linux 小白都能看懂的大数据入门（一）图文

电脑功率计算器2020_硬件巴士：怕电源性能过剩我教你算功率