Vue Router安装使用教程

野性酷女 2024-03-22 14:19 51阅读 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 条评论，51人围观）

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

相关阅读

相关 Vue-Router使用

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

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

相关 Vue Router安装使用教程

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

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

相关 vue安装vue-router出错

项目场景：在vue中安装vue-router -------------------- 问题描述：提示：在安装过程中报错，缺少依赖： PS D:\

痛定思痛。/ 2023年09月30日 08:24/ 0 赞/ 3 阅读

相关【VUE】vue-router使用

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

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

相关 vue-router 基本使用

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

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

相关 vue-router使用

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

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

相关 React Router 使用教程

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

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

相关 vue-router 基本使用

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

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

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

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

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

相关 vue-router 基本使用

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

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