草庐IT

vue路由配置

努力学前端Hang 2023-09-11 原文

1、路由的使用

一、安装路由

npm i vue-router

二、配置路由

在根目录下创建文件夹router，在router文件夹下创建index.js文件，如下图所示

在index.js文件中写入如下代码，实现创建一个路由器

import VueRouter from "vue-router"
import student from '../view/student'
import school from '../view/school'
const router=new VueRouter({
    routes:[
        //配置路由的路径
        {
            path:'/student',
            component:student
        },
        {
            path:'/school',
            component:school
        }
    ]
})
export default router;

 如上图，配置好了一个路由器，里面包含了2个路由，分别为student，school 路由

三、路由使用

在跟目录下创建view或者page文件夹，创建student，school两个路由（vue文件），如下图

 在main.js中注册路由

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
Vue.config.productionTip = false

new Vue({
  el:'#app',
  render: h => h(App),
  router:router
})

编辑student.vue路由

<template>
  <div>
    我是学生路由
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

编辑school.vue路由

<template>
  <div>
    我是学校路由
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

在app.vue中进行路由的使用

<template>
  <div>
    <router-link to="/student">到学生路由</router-link>
    <router-link to="/school">到学校路由</router-link>
    <div>
      <h1>以下是展示区域</h1>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
}
</script>

<style>
</style>

四、效果呈现

当点击到学生路由时，如下图

当点击学校路由时，如下图

 

 2、路由升级

一、嵌套路由的编写

在router文件夹下的index.js文件中进行修改，同时要引入person，animal路由（与student，school路由一样引入）

注意：student下了子路由中的path没有“/”

注意：student下了子路由中的path没有“/”

注意：student下了子路由中的path没有“/”

 routes:[
        //配置路由的路径
        {
            path:'/student',
            component:student,
            children:[
                {
                    path:'person',
                    component:person
                },
                {
                    path:'animal',
                    component:animal
                }
            ]
        },
        {
            path:'/school',
            component:school
        }
    ]

同时在view文件夹下建立person,animal组件，如下图

 在person,animal路由增加标识

 因为person，animal路由都是student下的子路由，所以在student.vue下进行修改

注意：子路由的跳转要加入父路由的路径！！！

<template>
  <div class="students">
    我是学生路由<br>
    <router-link to="/student/person">到person路由</router-link><br>
    <router-link to="/student/animal">到animal路由</router-link>
    <div>
      这里时student路由的子路由展示
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {

}
</script>

<style>
.students{
  background-color: pink;
}
</style>

 二、效果展示

进入学生路由后的初始状态

当点击person路由时

 

 当点击animal路由时

 注意地址栏的路径，有#，/student/animal

vue路由routerstudentgtvue.js前端javascript前端框架

有关vue路由配置的更多相关文章

  1. ruby-on-rails - Rails 3 中的多个路由文件 - 2

    Rails2.3可以选择随时使用RouteSet#add_configuration_file添加更多路由。是否可以在Rails3项目中做同样的事情？ 最佳答案 在config/application.rb中:config.paths.config.routes在Rails3.2(也可能是Rails3.1)中，使用:config.paths["config/routes"] 关于ruby-on-rails-Rails3中的多个路由文件，我们在StackOverflow上找到一个类似的问题

  2. ruby-on-rails - 独立 ruby​​ 脚本的配置文件 - 2

    我有一个在Linux服务器上运行的ruby​​脚本。它不使用rails或任何东西。它基本上是一个命令行ruby​​脚本，可以像这样传递参数:./ruby_script.rbarg1arg2如何将参数抽象到配置文件(例如yaml文件或其他文件)中？您能否举例说明如何做到这一点？提前谢谢你。 最佳答案 首先，您可以运行一个写入YAML配置文件的独立脚本:require"yaml"File.write("path_to_yaml_file",[arg1,arg2].to_yaml)然后，在您的应用中阅读它:require"yaml"arg

  3. Ruby Sinatra 配置用于生产和开发 - 2

    我已经在Sinatra上创建了应用程序，它代表了一个简单的API。我想在生产和开发上进行部署。我想在部署时选择，是开发还是生产，一些方法的逻辑应该改变，这取决于部署类型。是否有任何想法，如何完成以及解决此问题的一些示例。例子:我有代码get'/api/test'doreturn"Itisdev"end但是在部署到生产环境之后我想在运行/api/test之后看到ItisPROD如何实现？ 最佳答案 根据SinatraDocumentation:EnvironmentscanbesetthroughtheRACK_ENVenvironm

  4. ruby - rails 3 redirect_to 将参数传递给命名路由 - 2

    我没有找到太多关于如何执行此操作的信息，尽管有很多关于如何使用像这样的redirect_to将参数传递给重定向的建议:action=>'something',:controller=>'something'在我的应用程序中，我在路由文件中有以下内容match'profile'=>'User#show'我的表演Action是这样的defshow@user=User.find(params[:user])@title=@user.first_nameend重定向发生在同一个用户Controller中，就像这样defregister@title="Registration"@user=Use

  5. ruby-on-rails - Rails 3，嵌套资源，没有路由匹配 [PUT] - 2

    我真的为这个而疯狂。我一直在搜索答案并尝试我找到的所有内容，包括相关问题和stackoverflow上的答案，但仍然无法正常工作。我正在使用嵌套资源，但无法使表单正常工作。我总是遇到错误，例如没有路线匹配[PUT]"/galleries/1/photos"表格在这里:/galleries/1/photos/1/edit路线.rbresources:galleriesdoresources:photosendresources:galleriesresources:photos照片Controller.rbdefnew@gallery=Gallery.find(params[:galle

  6. Vscode+Cmake配置并运行opencv环境(Windows和Ubuntu大同小异) - 2

    之前在培训新生的时候，windows环境下配置opencv环境一直教的都是网上主流的vsstudio配置属性表，但是这个似乎对新生来说难度略高(虽然个人觉得完全是他们自己的问题)，加之暑假之后对cmake实在是爱不释手，且这样配置确实十分简单(其实都不需要配置)，故斗胆妄言vscode下配置CV之法。其实极为简单，图比较多所以很长。如果你看此文还配不好，你应该思考一下是不是自己的问题。闲话少说，直接开始。0.CMkae简介有的人到大二了都不知道cmake是什么，我不说是谁。CMake是一个开源免费并且跨平台的构建工具，可以用简单的语句来描述所有平台的编译过程。它能够根据当前所在平台输出对应的m

  7. 神州数码无线产品（AC+AP）配置 - 2

    注意：本文主要掌握DCN自研无线产品的基本配置方法和注意事项，能够进行一般的项目实施、调试与运维AP基本配置命令AP登录用户名和密码均为：adminAP默认IP地址为：192.168.1.10AP默认情况下DHCP开启AP静态地址配置：setmanagementstatic-ip192.168.10.1AP开启/关闭DHCP功能：setmanagementdhcp-statusup/downAP设置默认网关：setstatic-ip-routegeteway192.168.10.254查看AP基本信息：getsystemgetmanagementgetmanaged-apgetrouteAP配

  8. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明：前端使用微信微信小程序开发工具：后端使用ssm：VU

  9. hadoop安装之保姆级教程（二）之YARN的配置 - 2

    1.1.1 YARN的介绍 为克服Hadoop1.0中HDFS和MapReduce存在的各种问题⽽提出的，针对Hadoop1.0中的MapReduce在扩展性和多框架⽀持⽅⾯的不⾜，提出了全新的资源管理框架YARN. ApacheYARN（YetanotherResourceNegotiator的缩写）是Hadoop集群的资源管理系统，负责为计算程序提供服务器计算资源，相当于⼀个分布式的操作系统平台，⽽MapReduce等计算程序则相当于运⾏于操作系统之上的应⽤程序。 YARN被引⼊Hadoop2,最初是为了改善MapReduce的实现，但是因为具有⾜够的通⽤性，同样可以⽀持其他的分布式计算模

  10. ruby-on-rails - Rails - 从命名路由中提取 HTTP 动词 - 2

    Rails中有没有一种方法可以提取与路由关联的HTTP动词？例如，给定这样的路线:将“users”匹配到:“users#show”，通过:[:get,:post]我能实现这样的目标吗？users_path.respond_to?(:get)(显然#respond_to不是正确的方法)我最接近的是通过执行以下操作，但它似乎并不令人满意。Rails.application.routes.routes.named_routes["users"].constraints[:request_method]#=>/^GET$/对于上下文，我有一个设置cookie然后执行redirect_to:ba

随机推荐