vue router的使用

zhigoo 發布于2019-08-23 14:06 / 3075人閱讀

摘要：的使用安裝新建文件夾，建立文件如下路由懶加載設置當前路由在中應用在中設置路由跳轉鏈接一鏈接二跳轉默認是模式，切換成模式設置當前路由，歡迎。

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", //設置當前路由style
  routes
})
export default router;

3、在main.js中應用

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

  }
})

4、在APP.vue中設置路由跳轉

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

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

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

GPU云服務器云服務器 Vue Router vue-router vue使用webrtc vue 中使用 webrtc

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/100091.html

手挽手帶你學VUE：四檔 Vue-cli3 Vuex Vue-router

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

Sourcelink 2019-08-02 14:02 評論0 收藏0
手挽手帶你學VUE：四檔 Vue-cli3 Vuex Vue-router

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

AlphaWallet 2019-08-23 14:28 評論0 收藏0
[使用 Weex 和 Vue 開發原生應用] 6 使用 vue-router

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

leonardofed 2019-08-20 15:51 評論0 收藏0
從頭開始學習vue-router

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

tommego 2019-08-23 12:55 評論0 收藏0
從頭開始學習vue-router

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

jhhfft 2019-08-02 11:56 評論0 收藏0