首页 > 其他分享 >Vue Router

Vue Router

时间:2023-08-21 13:22:49浏览次数:35  
标签:Vue import component path Router 路由 页面

什么是路由

路由就是URL地址,地址不同,则显示的页面内容不同,路由分为前端路由和后端路由,Vue属于前端框架,因此我们讲解的路由也是前端路由。

Vue是单页面应用程序,通过hash(#)来实现不同页面之间的切换。

什么是单页面应用程序?通俗地讲就是不需要刷新页面,所有组件都在一个页面上的应用程序。

使用路由

在页面中使用路由需要以下5个步骤。

(1)引入路由。

(2)创建路由实例对象。

(3)为构造函数传递配置对象。

路由匹配规则的属性是routes,其值是数组,后期每一个匹配规则就是一个对象

path是哈希后面的路径,component是路径对应的组件

(4)将路由挂载到Vue实例对象。

(5)视图层显示组件内容。

 

src\router\index.js

import Vue from 'vue'
import Router from 'vue-router' // (1)引入路由
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

// (2)创建路由实例对象
export default new Router({
  // (3)为构造函数传递配置对象
  routes: [
    // {
    //   path: '/',
    //   redirect: 'login'
    // },
    {
      path: '/',
      components: {
        'header': {
          template: '<div>头部</div>',
        },
        'main': {
          template: '<div>主体</div>',
        },
        'footer': {
          template: '<div>底部</div>',
        }
      }
    },
    {
      path: '/login',
      component: () => import('@/views/test/Login'),
    },
    {
      path: '/register/:id',
      component: () => import('@/views/test/Register'),
    },
    {
      path: '/user',
      component: () => import('@/views/test/User'),
      children: [{
          path: 'login',
          component: () => import('@/views/test/Login'),
        },
        {
          path: 'register/:id',
          component: () => import('@/views/test/Register'),
        }
      ]
    }
  ]
})

  

src\App.vue

<template>
  <div id="app">
    <a href="#/login">登录</a>
    <a href="#/register">注册</a>
    <router-link to="/" tag="span">HOME</router-link>
    <router-link to="/login?id=1" tag="span">登录</router-link>
    <router-link to="/register/1">注册</router-link>
    <router-link to="/user">用户</router-link>
    <!-- (5)视图层显示组件内容 -->
    <transition>
      <router-view></router-view>
    </transition>
    <router-view name="header"></router-view>
    <router-view name="main"></router-view>
    <router-view name="footer"></router-view>
  </div>
</template>

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

<style>
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }

  .router-link-active {
    color: red;
  }

  .v-enter,
  .v-leave-to {
    opacity: 0;
    transform: translateX(200px);
  }

  .v-enter-active,
  .v-leave-active {
    transition: all 1s ease;
  }
</style>

  

 

官方文档: https://v3.router.vuejs.org/zh/guide/

 

标签:Vue,import,component,path,Router,路由,页面
From: https://www.cnblogs.com/ooo0/p/17645761.html

相关文章

  • Vue 项目性能优化实践
    Vue已经成为前端必备利器了,Vue首页加载速度慢是很常见的问题,dist文件的体积差不多都在10m左右,解决方式也有很多,最简单的方式增加服务器的配置性能,当然在预算有限的情况下,如果通过优化来提升速度呢。比如在一台普通配置服务器上,差不多加载速度在15s左右,那是没办法接受的,不管是用......
  • vue通讯的几种方式
    1.props和$emit。父组件向子组件传递数据是通过props传递的,子组件传递给父组件是通过$emit触发事件来做到的。2. 父组件中通过provide来提供变量,然后在子组件中通过inject来注入变量。3.$refs获取组件实例。4.envetBus兄弟组件数据传递,这种情况下可以使用事件总线的方......
  • 使用VuePress打造的LearnData知识库帮助我更好地学习和传播 - 从笔记到分享
    在当今快节奏的社会中,技术变化日新月异。作为一名技术博客站长,我深切感受到了学习和传播知识的重要性。为了更好地满足读者的需求,我决定采用VuePress搭建一个功能强大且易于维护的知识库平台,名为LearnData。本文将介绍我如何利用VuePress构建LearnData,并展示一些相关的代码示例。......
  • Vue 3 Deep Dive with Evan You
    什么是DOM?如果我们把这个HTML加载到浏览器中,浏览器创建这些节点,用来显示网页。所以这个HTML映射到一系列DOM节点,然后我们可以使用JavaScript进行操作。例如:letitem=document.getElementByTagName('h1')[0]item.textContent="NewHeading"VDOM网页可以有很多DOM节点,......
  • 老杜Vue的Bug列表实战代码
    老杜Vue的Bug列表实战代码谢谢杜老师的vue教学视频,说的真的好好各位亲爱的小伙伴,如果不能使用代码,请给我留言哈。1、效果图2、html代码(我自己写的,和杜老师的有些不同,不要纠结哈,基本是没错的)<!DOCTYPEhtml><html><head><metacharset="utf-8"><tit......
  • vue生命周期
    Vue的生命周期总共分为8个阶段:创建前/后,载入前/后,更新前/后,销毁前/后。1、beforeCreate(创建前)表示实例完全被创建出来之前,vue实例的挂载元素$el和数据对象data都为undefined,还未初始化。2、created(创建后)数据对象data已存在,可以调用methods中的方法,操作data中的数......
  • Vuex有哪几种属性?
    有五种,分别是State、Getter、Mutations、Actions、Modulesstate=>基本数据(数据源存放地)getters=>从基本数据派生出来的数据mutations=>提交更改数据的方法,是同步操作actions=> 用于异步操作和提交mutations,在actions中可以进行任何异步操作,最后再提交到mutations中......
  • Vue-Router 的懒加载如何实现
    非懒加载:importListfrom'@/components/list.vue'constrouter=newVueRouter({routes:[{path:'/list',component:List}]}) 懒加载:1.使用箭头函数+import动态加载constList=()=>import('@/components/list.vue')constroute......
  • Vue CLI脚手架
    1、node_modules依赖包①我们通过项目终端输入npmi,就会生成该依赖包,依赖包会自动根据package.json文件中所有需要的东西进行封装下载,例如:jquery,vue2等等②该依赖包因为承载项目的所有内容,在项目大的时候其所占内存也会很大。③在项目传发时,依赖包是可以删除的,他人只需要输入npmi,......
  • Vue基础语法
    一、插槽1、格式放在子组件<slot>内容</slot>2、内容可以放任何模块的代码3、原理父组件引用时,填写内容会被应用到插槽css模块<style>.box{width:200px;height:200px;background-color:aqua;float:left;margin-right:20px;......