vue router的使用

zhigoo 发布于2019-08-23 14:06 / 2972人阅读

摘要：的使用安装新建文件夹，建立文件如下路由懒加载设置当前路由在中应用在中设置路由跳转链接一链接二跳转默认是模式，切换成模式设置当前路由，欢迎。

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。

专线服务超融合服务器 Vue Router vue-router vue使用webrtc vue 中使用 webrtc

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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