vue.router和vue.route

Vue Router 和 Vue Route 是 Vue.js 中用于构建单页面应用(SPA)路由系统的两个核心概念。Vue Router 是 Vue.js 的官方路由管理器,而 Vue Route 则是在 Vue 组件内部通过 $route 对象来访问当前路由的信息。

Vue Router 的使用

Vue Router 主要用于定义路由规则、创建导航链接以及渲染与 URL 对应的组件。以下是一个简单的使用示例:

1. 安装和引入 Vue Router

首先,你需要在项目中安装 Vue Router:

复制代码
npm install vue-router

然后,在你的 Vue 应用中引入并使用 Vue Router:

复制代码
import Vue from 'vue';  
import Router from 'vue-router';  
import Home from './views/Home.vue';  
import About from './views/About.vue';  
  
Vue.use(Router);  
  
export default new Router({  
  routes: [  
    {  
      path: '/',  
      name: 'home',  
      component: Home  
    },  
    {  
      path: '/about',  
      name: 'about',  
      component: About  
    }  
  ]  
});
2. 在 Vue 应用中使用路由

在你的 Vue 应用入口文件(如 main.js)中,引入并使用这个路由实例:

复制代码
import Vue from 'vue';  
import App from './App.vue';  
import router from './router';  
  
new Vue({  
  router,  
  render: h => h(App)  
}).$mount('#app');
3. 在组件中创建导航链接和渲染路由内容

App.vue 或其他组件中,使用 <router-link> 创建导航链接,并使用 <router-view> 来渲染当前路由对应的组件:

复制代码
<template>  
  <div id="app">  
    <nav>  
      <router-link to="/">Home</router-link> |  
      <router-link to="/about">About</router-link>  
    </nav>  
    <router-view></router-view>  
  </div>  
</template>

Vue Route 的使用

Vue Route 主要通过 $route 对象在 Vue 组件内部访问当前路由的信息。以下是一些常用的 $route 属性:

  • $route.path:字符串,对应当前路由的路径,总是解析为绝对路径,如 "/foo/bar"。
  • $route.params:一个包含动态片段和星号片段的键值对的对象。
  • $route.query:一个包含查询参数的对象。例如,对于路径 "/foo?user=1",则有 $route.query.user == 1
  • $route.name:当前路由的名字(如果有的话)。
示例:在组件中访问路由信息

假设你有一个组件,你想根据当前路由的参数或查询参数来改变其内容。你可以这样使用 $route

复制代码
<template>  
  <div>  
    <h1>User Info</h1>  
    <p>User ID: {{ $route.params.id }}</p>  
    <p>Query Parameter: {{ $route.query.param }}</p>  
  </div>  
</template>  
  
<script>  
export default {  
  name: 'UserInfo',  
  watch: {  
    '$route.params': function(toParams, fromParams) {  
      // 对路由变化作出响应...  
    }  
  }  
}  
</script>

在这个示例中,我们创建了一个名为 UserInfo 的组件,它显示当前路由的 id 参数和查询参数 param。我们还使用了 Vue 的 watch 选项来监听 $route.params 的变化,以便在路由参数变化时执行某些操作。

综合示例

将 Vue Router 和 Vue Route 结合使用,你可以构建复杂的单页面应用。以下是一个更综合的示例:

定义路由时包含一个带有参数的路由:

复制代码
export default new Router({  
  routes: [  
    // ...其他路由  
    {  
      path: '/user/:id',  
      name: 'user',  
      component: User  
    }  
  ]  
});

User 组件中,根据 $route.params.id 显示不同用户的信息:

复制代码
<template>  
  <div>  
    <h1>User {{ $route.params.id }}</h1>  
    <!-- 根据 $route.params.id 加载和显示用户数据 -->  
  </div>  
</template>  
  
<script>  
export default {  
  name
相关推荐
zwjapple4 小时前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
像风一样自由20206 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem7 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊7 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术7 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
幽络源小助理7 小时前
SpringBoot基于Mysql的商业辅助决策系统设计与实现
java·vue.js·spring boot·后端·mysql·spring
GISer_Jing7 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止8 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall8 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴8 小时前
简单入门Python装饰器
前端·python