vue route

生活百科 2022-10-29 19:15www.ai-classes.cn生活常识

vue route是怎样的呢?下面就让我们一起来了解一下吧

vue也就是Vue路由,即可以根据不同地址,创造不同页面。而route即一个路由,路由是url到函数的映射,它能够将url路径与一个函数进行映射,,route也能够相当于当前正在跳转的对象,可从里面获取na、path、params、query等。

拓展

在vue中使用vue-route的方式

1、需要下载vue-router

即npm install vue-router --save

2、进行编码

1.需要先在项目中新建文件夹router/index.js。具体指令为

/

路由对象模块

/

import Vue from 'vue'

import VueRouter from 'vue-router'

/引入pages/

const MSite = ()=>import('../pages/MSite/MSite');

const Profile = ()=>import('../pages/Profile/profile');

const Patient = ()=>import('../pages/Patient/Patient');

//申明使用插件

Vue.use(VueRouter)

export default new VueRouter({

  routes:[

    {

      path:'/msite',

      ponent: MSite,

      ta: {

        showFooter: true

      }

    },

    {

      path:'/profile',

      ponent:Profile,

      ta: {

        showFooter: true

      }

    },

    {

      path:'/patient',

      ponent:Patient,

      ta: {

        showFooter: false

      }

    },

    {

      path: '/',

      redirect: '/msite' //系统默认页

    }

  ]

})

2.接着就可以在main.js中全局使用router了,具体指令为

// The Vue build version to load with the `import` mand

// (runti-only or standalone) has been set in webpack.base.conf with an alias.

import Vue from 'vue'

import App from './App'

import router from './router' //引入路由

/ eslint-disable no-new /

new Vue({

  el: '#app',

  ponents: { App },

  template: '<App/>',

  router  //引入路由

})

以上就是小编的分享了,希望能够帮助到大家。

Copyright © 2014-2025 Www.ai-classes.cn 爱句子网