vue-router 学习

Achilles 发布于2019-08-20 11:19 / 2572人阅读

摘要：第一步路由配置项第二步路由映射全部精华路由参数是路由参数。和这两行代码，使用了用了具名路径。对应路由配置中的，使用接收参数。

参考

vue-router文档

使用Vue快速开发单页应用 vue-router

Vue.js——vue-router 60分钟快速入门
Demo:https://github.com/keepfool/vue-tutorials/blob/master/06.Router/basic/basic_04.html

路由配置

路由配置其实是分两步的，第一步把vue-router的指令方法挂到Vue实例，第二步才是添加路由配置上。

import Vue from "vue"
import VueRouter from "vue-router"
import App from "App.vue"
Vue.use(VueRouter) // 第一步

//路由配置项:http://router.vuejs.org/zh-cn/options.html
const router = new VueRouter({
  hashbang = true,
  abstract = false,
  history = true,
  saveScrollPosition = true,
  transitionOnLoad = false,
  suppressTransitionError = false,
  root = null,
  linkActiveClass = "v-link-active"
}) // 第二步

//路由映射: http://router.vuejs.org/zh-cn/api/map.html
router.map({
    "/": {
      name: "index",
      title: "全部",
      component: (resolve) => require(["./components/main/index.vue"], resolve)
    },
    "/good": {
      name: "good",
      title: "精华",
      component: (resolve) => require(["./components/main/index.vue"], resolve)
    }
  })
router.start(App, "#app")

路由参数

import Home from "components/Home"
import News from "components/News"
import NewsDetail from "components/NewsDetail"
import Message from "components/Message"
import About from "components/About"
router.map({
    "/home": {
        component: Home,
        subRoutes: {
            "/news": {
                name: "news",
                component: News,
                subRoutes: {
                    "detail/:id": {
                        name: "detail",
                        component: NewsDetail
                    }
                }
            },
            "/message": {
                component: Message
            }
        }
    },
    "/about": {
        component: About
    }
})

/:id是路由参数。例如：如果要查看id = "01"的News详情，那么访问路径是/home/news/detail/01。

News和News 01这两行HTML代码，使用了用了具名路径。

params: {id: "01"}对应路由配置中的/:id，使用this.$route.parames.id接收params参数。
也可使用query: {id: "01"}传参，然后使用this.$route.query.id接收参数

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

转载请注明本文地址：https://www.ucloud.cn/yun/80505.html

vue-router学习

vue-router使用步骤(本教程并不全面，只研究到了本人够用的程度，如果还想要深入了解路由，请在vue router 文档中学习)：手动： npm 安装 vue-router npm install vue-router 配置路由 1. 在main.js同级目录下（目录结构不一定要和我完全一样）新建router.js； 2. 在router.js中引用vue 和 vue-route...

elva 2019-08-26 13:38 评论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
从头开始学习vue-router

摘要：路由模块的本质就是建立起和页面之间的映射关系。这时候我们可以直接利用传值了使用来匹配路由，然后通过来传递参数跳转对应路由配置于是我们可以获取参数六配置子路由二级路由实际生活中的应用界面，通常由多层嵌套的组件组合而成。一、前言要学习vue-router就要先知道这里的路由是什么？为什么我们不能像原来一样直接用标签编写链接哪？vue-router如何使用？常见路由操作有哪些？等等这些问...

frontoldman 2019-08-29 17:11 评论0 收藏0
Vue学习日记（三）——Vue路由管理vue-router

摘要：重定向可以实现某些需要根据特定逻辑改变页面原本路由的需求，例如简单的未登录状态下的页面访问个人信息路由时应该重定向到登录路由页面。前言为了给读者更好的体验，去理解vue-router和下一篇介绍vuex，决定还是来一个实战教程来带大家更加的去深入理解vue-router，在这之前，读者先自行了解和去官网下载npm和node，附：npm官网项目构建这里我采用vue-cli+web...

iKcamp 2019-08-30 13:54 评论0 收藏0