vue-router—1什么是路由以及使用步骤

梦里梦外; 2022-01-21 08:47 158阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 2][]

现在开始实操

main.js

import Vue from 'vue'
    import VueRouter from "vue-router";
    
    
    // 作为vue的插件
    Vue.use(VueRouter)
    
    import App from "./App";
    import home from "@/components/home";
    
    var router = new VueRouter({
      routes: [
        {
          path: '/',
          component: home
        }
      ]
    })
    
    new Vue({
      el: "#app",
      router,
      template: '<App />',
      components: {
        App
      }
    
    })

![20190609130356302.png][]

测试一下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 3][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70]: /images/20220121/b2be50635d93499dba68c4923b77b2f0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 1]: /images/20220121/41203c1f044b4c9ebdbc8ca20b6387b7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 2]: /images/20220121/1511f1dc08f444609004259478f95d97.png
[20190609130356302.png]: /images/20220121/bb22ce5515ef4386b95db92d08b77802.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 3]: /images/20220121/4f721579c44846d3a6f40fb1b422a6f0.png

发表评论取消回复

表情：

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

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

相关阅读

相关 vue-路由配置和使用步骤整理

[vue-路由配置和使用步骤整理][vue-] **介绍** 路由：控制组件之间的跳转，不会实现请求、不用页面刷新，直接跳转-切换组件》》》安装 ...

左手的ㄟ右手/ 2024年04月18日 14:43/ 0 赞/ 62 阅读

相关什么是路由守卫？

第一次认识路由守卫：之前我做过的小项目里面，我们直接在浏览器网址的地方进行修改就能跳转页面，这是不安全的，因此就需要路由守卫，实现通过路由拦截，来判断用户是否登录，该页面用户是

谁践踏了优雅/ 2024年04月01日 13:19/ 0 赞/ 74 阅读

相关 VueRouter路由嵌套

1. 前言本小节我们介绍如何嵌套使用 VueRouter。嵌套路由在日常的开发中非常常见，如何定义和使用嵌套路由是本节的重点。同学们在学完本节课程之后需要自己多尝试配置

怼烎@/ 2024年03月30日 18:02/ 0 赞/ 98 阅读

相关 VueRouter路由传参

1. 前言本小节我们介绍 VueRouter 路由组件传参。包括 params 传参、query 传参的两种方式。路由传参的知识点非常重要，在日常开发中，我们经常会通过

Myth丶恋晨/ 2024年03月27日 08:47/ 0 赞/ 107 阅读

相关什么是网关？什么是路由？什么是IP?

什么是网关？网关（Gateway）就是一个网络连接到另一个网络的“关口”。按照不同的分类标准，网关也有很多种。TCP/IP协议里的网关是最常用的，在这里我们所讲的“

曾经终败给现在/ 2023年01月16日 09:57/ 0 赞/ 267 阅读

相关什么是前端路由

前端路由在很多开源的js类库框架中都得到支持，如angularJS，Backbone，Reactjs等等。这篇文章主要和大家谈谈什么是前端路由，以及它的使用场景及优缺点 1

心已赠人/ 2022年06月14日 04:26/ 0 赞/ 274 阅读

相关 node总结之路由是什么鬼

如果我们要为路由提供请求的 URL 和其他需要的 GET 及 POST 参数，随后路由需要根据这些数据来执行相应的代码，所以，我们需要查看 HTTP 请求，从中提取出请求的 U

谁践踏了优雅/ 2022年05月13日 16:52/ 0 赞/ 219 阅读

相关 Vue--配置路由步骤

首先我来说说，为什么项目中需要使用路由，通常我们跳转页面的话，页面都需要刷新进行HTTP请求，如果我们采用路由机制的话，页面不会进行刷新，减轻了服务器的负担。本篇文章主要是

红太狼/ 2022年01月27日 01:27/ 0 赞/ 306 阅读

相关 vue-router—1什么是路由以及使用步骤

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9

梦里梦外;/ 2022年01月21日 08:47/ 0 赞/ 159 阅读

相关 koa 路由以及动态路由

1、引入Koa类和路由类 const Koa=require('koa'); const Router=require('koa-router');

川长思鸟来/ 2021年07月24日 16:00/ 0 赞/ 742 阅读