vue route

vue route是怎樣的呢？下面就讓我們一起來了解一下吧：

vue一般來說也就是Vue路由，即可以根據(jù)不同地址，創(chuàng)造不同頁面。而route即一個(gè)路由，路由是url到函數(shù)的映射，它能夠?qū)rl路徑與一個(gè)函數(shù)進(jìn)行映射，當(dāng)然，route也能夠相當(dāng)于當(dāng)前正在跳轉(zhuǎn)的對(duì)象，可從里面獲取name、path、params、query等。

拓展：

在vue中使用vue-route的方式：

1、首先需要下載vue-router

即npm install vue-router --save

2、進(jìn)行編碼

1.需要先在項(xiàng)目中新建文件夾router/index.js。具體指令為：

/*

* 路由對(duì)象模塊

* */

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',

      component: MSite,

      meta: {

        showFooter: true

      }

    },

    {

      path:'/profile',

      component:Profile,

      meta: {

        showFooter: true

      }

    },

    {

      path:'/patient',

      component:Patient,

      meta: {

        showFooter: false

      }

    },

    {

      path: '/',

      redirect: '/msite' //系統(tǒng)默認(rèn)頁

    }

  ]

})

2.接著就可以在main.js中全局使用router了，具體指令為：

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

// (runtime-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',

  components: { App },

  template: '<App/>',

  router  //引入路由

})

以上就是小編的分享了，希望能夠幫助到大家。

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com