admin管理员组

文章数量:1633915

（1）在src/main.js入口文件中引入相关模块及组件

（2）安装 vue 路由模块vue-router和网络请求模块vue-resource

（3）配置路由选项及渲染App组件（src/main.js入口文件）

（4）创建路由，配置路由映射并导出（src/router/index.js）

方法1：require读取模块
第一步：创建路由实例

第二步：配置路由映射

第三步：导出路由配置

上面案例也可以直接导出，即3步融合成2步

方法2：import…from…读取模块


（5）设置链接router-link（src/App.vue）

使用 router-link 组件来导航，通过传入 to 属性指定链接， 默认会被渲染成一个 <a> 标签

（6）设置路由映射组件渲染router-view（src/App.vue）

综合以上步骤整体代码块：

1.( src/touter/index.js )配置路由映射并导出

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

const Home = require('../components/Home.vue')
const About = require('../components/About.vue')
const Tab = require('../components/Tab.vue')

const router = new Router({
  mode:'history',
  routes:[
    {
      path:'/',/*默认进入路由（写在第一个）*/
      redirect:'/home'/*重定向*/
    },
    {name:'home',path:'/home',components:Home},
    {name:'about',path:'/about',components:About},
    {name:'tab',path:'/tab',components:Tab},
    {
      path:'*',/*404错误路由（写在最后一个）*/
      redirect:'/home'/*重定向*/
    }
  ]
})

export default router

2.安装 vue 路由模块vue-router和网络请求模块vue-resource

cnpm install vue-router vue-resource --save

3.(src/main.js)增加路由选项router

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

4.(src/App.vue)设置链接router-link和路由映射组件渲染router-view

	 <router-link to='/home'>主页</router-link>
   	 <router-link to='/about'>关于我们</router-link>
     <router-link to='/tab'>动态组件</router-link>
     <router-view></router-view>

本文标签： 路由vuerouter

版权声明：本文标题：vue-路由router配置 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/dianzi/1729176463a1188781.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。