close

Routing 以及 Navigation 在 Vue .js 中- 综合指南

Routing 和是 .js 中用于创建页面并在 Web 应用程序中在页面之间导航的 Navigation 基本概念。 是一个强大而灵活的库，用于管理.js 中的系统 。 Vue Vue Router routing Vue

 

route 以下是 .js中与 s 相关的基本概念 Vue：

  1. Route:A route 定义一条路径并将其链接到相应的组件。 每个 route 都有一个路径和一个组件。

  2. Vue Router: 是一个用于管理.js 中的 s 的库 。 它提供了在应用程序中 定义和管理的工具 。 Vue Router route Vue route Vue

  3. Route 组件：每个 route 组件都有相应的组件。 当 a route 被激活时，将显示关联的组件。

  4. 动态 Route ：动态 route 允许您使用动态参数定义 route s。 例如，您可以定义 route 路径“/user/:id”来显示对应id的用户信息。

  5. 嵌套 Route ：嵌套 route 是一个允许您将子级嵌套 route 在父级中的概念 route。 这使您能够构建复杂的 route 结构并以嵌套方式组织组件。

  6. 重定向 Route ：重定向 route 允许您将用户从一个路径重定向到另一路径。 当您希望 route 用户从旧路径转到新路径时，这非常有用。

  7. Route 守卫： route 守卫是一种允许您检查和控制对 route s 的访问的功能。 通过使用 route 守卫，您可以定义条件来阻止用户访问某些 route 内容或在重定向之前执行特殊处理。

 

要使用 ，您可以按照以下步骤操作： Vue Router

步骤1： 使用npm或yarn 安装： Vue Router 

npm install vue-router

或者 

yarn add vue-router

步骤2： 在项目根目录下 创建一个文件。 在此文件中，我们将声明并配置 应用程序的 s。 router.js route 

import Vue from 'vue';  
import VueRouter from 'vue-router';  
  
Vue.use(VueRouter);  
  
const router = new VueRouter({
  routes: [  
    // Declare routes here  
  ]  
});  
  
export default router;

步骤 3： 在 main.js 文件中，导入 并将其链接到 应用程序： Vue Router Vue 

import Vue from 'vue';  
import App from './App.vue';  
import router from './router';  
  
new Vue({
  router,  
  render: h => h(App),  
}).$mount('#app');

步骤 4： 在 文件中，您可以使用 、和其他属性 等组件来声明 s 。 router.js route Vue Router path component

例如，您可以 route 为主页声明 a， route 为关于页面声明 a，如下所示： 

import Home from './components/Home.vue';  
import About from './components/About.vue';  
  
const router = new VueRouter({
  routes: [  
    { path: '/', component: Home },  
    { path: '/about', component: About }  
  ]  
});

第五步： 在 Vue 组件中，你可以使用组件 来创建其他的链接 ，以及 显示当前的内容 。 <router-link> route <router-view> route

例如，在 Home 组件的模板中，您可以使用 创建一个指向 about 页面的链接： <router-link> 

<router-link to="/about">Go to About</router-link>

在App组件的模板中，可以用来 显示当前的内容 ： <router-view> route 

<router-view></router-view>

通过这些步骤，您已经在.js 应用程序中 设置并使用了 管理 和 。 Vue Router routing navigation Vue