Vue Router安装使用教程

野性酷女 2024-03-22 14:19 46阅读 0赞

#### 目录 ####

*  安装
 *  使用
 *   *  创建路由实例
     *  配置 Vue.js 应用程序
     *  创建路由链接
     *  创建路由视图

Vue Router 是 Vue.js 的官方路由管理器，用于构建单页面应用（SPA）

## 安装 ##

通过 npm 安装 VueRouter：

npm install vue-router

## 使用 ##

### 创建路由实例 ###

定义路由规则： / 和 /about，对应组件 Home 和 About

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

### 配置 Vue.js 应用程序 ###

将创建的路由实例 router 注入到 Vue 实例中，并将 Vue 实例渲染到页面中的 \#app 元素中

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

### 创建路由链接 ###

使用 “router-link” 标签创建两个路由链接，分别是指向 / 和 /about

<template>
      <div>
        <router-link to="/">Home</router-link>
        <router-link to="/about">About</router-link>
        <router-view></router-view>
      </div>
    </template>

### 创建路由视图 ###

使用 “router-view” 标签创建了路由视图，用于渲染路由规则对应的组件

<template>
      <div>
        <router-link to="/">Home</router-link>
        <router-link to="/about">About</router-link>
        <router-view></router-view>
      </div>
    </template>

这样，就完成了 VueRouter 的安装和使用

发表评论取消回复

表情：

评论列表（有 0 条评论，46人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue-Router使用

next:调用该方法后才能进入下一个钩子。next() 直接进入下一个钩子,next(false) 中断当前的导航。next('/') 或者 next({ path: '...

一时失言乱红尘/ 2024年05月07日 22:25/ 0 赞/ 59 阅读

相关 Vue Router安装使用教程

目录安装使用创建路由实例配置 Vue.js 应用程序创建路由链接创建路由视图 Vue

野性酷女/ 2024年03月22日 14:19/ 0 赞/ 47 阅读

相关【VUE】vue-router使用

vue-router：即vue路由管理组件，用于管理vue各页面之间的访问及控制。 router.js及main.js为vue默认的路由管理文件在iview及其他vue框

青旅半醒/ 2023年06月24日 12:23/ 0 赞/ 18 阅读

相关 vue-router 基本使用

路由，其实就是指向的意思，当我点击页面上的home按钮时，页面中就要显示home的内容，如果点击页面上的about 按钮，页面中就要显示about 的内容。Home按钮 =>

小灰灰/ 2023年05月29日 05:14/ 0 赞/ 88 阅读

相关 Vue Router 路由的安装和使用

文章目录路由（Router）的安装配置路由引用组件动态路由历史模式完全匹配包含匹配重定向导

骑猪看日落/ 2023年02月10日 05:10/ 0 赞/ 7 阅读

相关 vue-router使用

一、搭建vue-router框架 1、安装vue-router npm install vue-router --save 2、在模块化工程中使用它 (1)

朱雀/ 2022年12月26日 08:10/ 0 赞/ 118 阅读

相关 React Router 使用教程

真正学会 [React][] 是一个漫长的过程。http://www.ruanyifeng.com/blog/2016/05/react\_router.html?utm\_s

╰半夏微凉°/ 2022年06月02日 01:13/ 0 赞/ 195 阅读

相关 vue-router 基本使用

　　路由，其实就是指向的意思，当我点击页面上的home按钮时，页面中就要显示home的内容，如果点击页面上的about 按钮，页面中就要显示about 的内容。Home按钮

比眉伴天荒/ 2022年05月08日 08:52/ 0 赞/ 169 阅读

相关 Vue教程(路由router-基本使用)

本文开始我们来给大家介绍在Vue中非常重要的一个内容，就是路由Router 什么是路由 1. 后端路由：对于普通的网站，所有的超链接都是URL地址，所有的URL地

深碍√TFBOYSˉ_/ 2021年11月10日 19:04/ 0 赞/ 285 阅读

相关 vue-router 基本使用

[vue-router 基本使用][vue-router] 　　路由，其实就是指向的意思，当我点击页面上的home按钮时，页面中就要显示home的内容，如果点击页面上的a

雨点打透心脏的1/2处/ 2021年09月30日 07:06/ 0 赞/ 298 阅读