<ul id="sgu2o"></ul>

<strike id="sgu2o"></strike>

vue router的使用

zhigoo 發(fā)布于2019-08-23 14:06 / 3080人閱讀

摘要：的使用安裝新建文件夾，建立文件如下路由懶加載設(shè)置當(dāng)前路由在中應(yīng)用在中設(shè)置路由跳轉(zhuǎn)鏈接一鏈接二跳轉(zhuǎn)默認(rèn)是模式，切換成模式設(shè)置當(dāng)前路由，歡迎。

vue router的使用

1、安裝：npm install vue-router --save
2、新建router文件夾，建立index.js文件如下：

import Vue from "vue"
import Router from "vue-router"
//路由懶加載
const login = resolve => require(["../login.vue"], resolve);
const Apps = resolve => require(["../App.vue"], resolve);
const HelloWorld = resolve => require(["../components/HelloWorld"], resolve);
const second = resolve => require(["../components/second"], resolve);
const detail = resolve => require(["../components/detail"], resolve);

Vue.use(Router)

const routes = [
  {
    path: "/login",
    name: "login",
    component: login
  },
  {
    path: "/Apps",
    name: "Apps",
    component: Apps,
    children: [
      {
        path: "/HelloWorld",
        name: "HelloWorld",
        component: HelloWorld
      },
      {
        path: "/second",
        name: "second",
        component: second
      },
      {
        path: "/detail",
        name: "detail",
        component: detail
      }
    ]
  },
  {
    path: "/",
    redirect: "/login"
  }
]

var router = new Router({
  linkActiveClass:"list-active", //設(shè)置當(dāng)前路由style
  routes
})
export default router;

3、在main.js中應(yīng)用

import Vue from "vue";
import router from "./router";
var v = new Vue({
  el: "#app",
  router,
  components: {App},
  template: "",
  created: function () {

  }
})

4、在APP.vue中設(shè)置路由跳轉(zhuǎn)

5、js跳轉(zhuǎn)：this.$router.push({name: "detail", query: {userInfo: thisName}})
6、vue-router默認(rèn)是hash模式，切換成history模式

var router = new Router({
  mode: "history",
  linkActiveClass:"list-active", //設(shè)置當(dāng)前路由style
  routes
})

7、github：vue-router，歡迎star。

GPU云服務(wù)器云服務(wù)器 Vue Router vue-router vue使用webrtc vue 中使用 webrtc

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/100091.html

相關(guān)文章

手挽手帶你學(xué)VUE：四檔 Vue-cli3 Vuex Vue-router

摘要：安裝過后到命令行執(zhí)行檢查版本，如果彈出版本的話恭喜你安裝成功，我們開始進(jìn)行下面的步驟了。全局安裝的包名稱由改成了。如果你已經(jīng)全局安裝了舊版本的或，你需要先通過卸載它。中的非常類似于事件每個(gè)都有一個(gè)字符串的事件類型和一個(gè)回調(diào)函數(shù)。視頻教程由于思否不支持視頻外鏈，視頻請(qǐng)移步http://www.henrongyi.top 你能學(xué)到什么在這一期的學(xué)習(xí)進(jìn)度中，我們會(huì)開始學(xué)習(xí)在我們工作開...

Sourcelink 2019-08-02 14:02 評(píng)論0 收藏0
手挽手帶你學(xué)VUE：四檔 Vue-cli3 Vuex Vue-router

摘要：安裝過后到命令行執(zhí)行檢查版本，如果彈出版本的話恭喜你安裝成功，我們開始進(jìn)行下面的步驟了。全局安裝的包名稱由改成了。如果你已經(jīng)全局安裝了舊版本的或，你需要先通過卸載它。中的非常類似于事件每個(gè)都有一個(gè)字符串的事件類型和一個(gè)回調(diào)函數(shù)。視頻教程由于思否不支持視頻外鏈，視頻請(qǐng)移步http://www.henrongyi.top 你能學(xué)到什么在這一期的學(xué)習(xí)進(jìn)度中，我們會(huì)開始學(xué)習(xí)在我們工作開...

AlphaWallet 2019-08-23 14:28 評(píng)論0 收藏0
[使用 Weex 和 Vue 開發(fā)原生應(yīng)用] 6 使用 vue-router

摘要：使用值來作路由。原生應(yīng)用本身就是多頁的場(chǎng)景，頁面間狀態(tài)的隔離比共享更重要一些。使用開發(fā)的是原生應(yīng)用，頁面棧的管理使用的也是原生的特性，沒有但是有模塊可以實(shí)現(xiàn)頁面的前進(jìn)和后退等操作。系列文章的目錄在 ? 這里（由于我比較懶最近一段時(shí)間在忙其他事，系列文章拖了好久終于又更新了。。。）什么是 vue-router ？ vue-router 官方文檔 vue-router 是針對(duì) V...

leonardofed 2019-08-20 15:51 評(píng)論0 收藏0
從頭開始學(xué)習(xí)vue-router

摘要：路由模塊的本質(zhì)就是建立起和頁面之間的映射關(guān)系。這時(shí)候我們可以直接利用傳值了使用來匹配路由，然后通過來傳遞參數(shù)跳轉(zhuǎn)對(duì)應(yīng)路由配置于是我們可以獲取參數(shù)六配置子路由二級(jí)路由實(shí)際生活中的應(yīng)用界面，通常由多層嵌套的組件組合而成。一、前言要學(xué)習(xí)vue-router就要先知道這里的路由是什么？為什么我們不能像原來一樣直接用標(biāo)簽編寫鏈接哪？vue-router如何使用？常見路由操作有哪些？等等這些問...

tommego 2019-08-23 12:55 評(píng)論0 收藏0
從頭開始學(xué)習(xí)vue-router

摘要：路由模塊的本質(zhì)就是建立起和頁面之間的映射關(guān)系。這時(shí)候我們可以直接利用傳值了使用來匹配路由，然后通過來傳遞參數(shù)跳轉(zhuǎn)對(duì)應(yīng)路由配置于是我們可以獲取參數(shù)六配置子路由二級(jí)路由實(shí)際生活中的應(yīng)用界面，通常由多層嵌套的組件組合而成。一、前言要學(xué)習(xí)vue-router就要先知道這里的路由是什么？為什么我們不能像原來一樣直接用標(biāo)簽編寫鏈接哪？vue-router如何使用？常見路由操作有哪些？等等這些問...

jhhfft 2019-08-02 11:56 評(píng)論0 收藏0