美文网首页
vue路由配置

vue路由配置

作者: undefind33 | 来源:发表于2018-06-13 18:24 被阅读0次

1.安装

npm install vue-router --save

2. 引入并 Vue.use(VueRouter) (main.js)

import VueRouter from 'vue-router'

Vue.use(VueRouter)

3.配置路由


1、创建组件 引入组件

2、定义路由  (建议复制s)

const routes = [

  { path: '/foo', component: Foo },

  { path: '/bar', component: Bar },

  { path: '*', redirect: '/home' }  /*默认跳转路由*/

]

3、实例化VueRouter

const router = new VueRouter({

  routes // (缩写)相当于 routes: routes

})

4、挂载

new Vue({

  el: '#app',

  router,

  render: h => h(App)

})

5、路由跳转Go to FooGo to Bar

相关文章

  • vue路由的介绍(二)--vue动态路由和get的传值

    vue动态路由和get的传值---->同属于路由的传参 1,vue动态路由: 动态路由的配置: ①,在配置路由时加...

  • Vue路由

    一、Vue路由基础用法: 二、Vue路由配置的抽出 三、路由动态传值: 四、路由的跳转方式: 五、路由的hash模...

  • Vue 基础 - 前端路由

    使用vue-router实现前端路由 安装vue-router: 配置路由文件,并在vue实例中导入: 设置视图(...

  • Vue-Router路由

    一、Vue路由配置 1、安装 2、引入vue-router并注册路由(以下步骤都在main.js里面) 3、配置路...

  • vue路由配置、跳转、传参

    一、vue路由 1、路由配置文件 (1)在router.js中导入Vue和VueRouter (2)Vue调用Vu...

  • 使用vue-router切换组件

    https://router.vuejs.org/ vue路由配置:

  • 子路由

    app.vue 路由配置 3.banana

  • Vue-Router

    1. 路由配置 默认路由跳转 在 new Router时可用的配置参数: 2.路由传参 Vue路由传参的几种方式 ...

  • vue-cli脚手架中的路由(vue-router)03(子路由

    对于单页面的vue应用,子路由的配置可能是必不可少的,其实vue的子路由配置很简单。这篇文章是基于上一片文章(路由...

  • Vue路由配置

    Vue路由使根组件可以自由的挂载需要的子组件。 路由配置: 一、安装 npm install vue-router...

网友评论

      本文标题:vue路由配置

      本文链接:https://www.haomeiwen.com/subject/rbhseftx.html