首页 > 代码库 > vue2.0学习笔记之webpack-simple模板中的路由简单配置案例
vue2.0学习笔记之webpack-simple模板中的路由简单配置案例
以下是完成后的目录结构
案例基础是已经用 webpack+vue-cli 创建了一个名为 vue_router的工程 , 并安装了vue-router
1. 定义组件
1.1 先在 src 目录下创建组件文件夹 components , 添加两个文件Home.vue 和 News.vue, 代码如下：
Home.vue （推荐首字母大写）
<template> <h3>主页</h3></template>
News.vue
<template> <h3>新闻</h3></template>
1.2 然后在 src 目录下创建配置路由的文件 router.config.js , 代码如下：
import Home from ‘./components/Home.vue‘ // 导入组件Homeimport News from ‘./components/News.vue‘ // 导入组件News// export default 的好处是再导入时模块可以随便命名export default { routes:[ { path:‘/home‘,component:Home }, { path:‘/news‘,component:News }, { path:‘*‘,redirect:‘/home‘ } ]}
2. 引入、创建、挂载路由
在 main.js 中修改如下：
import Vue from ‘vue‘import vueRouter from ‘vue-router‘ // 引入vue-routerimport App from ‘./App.vue‘import routerConfig from ‘./router.config.js‘ // 导入路由配置Vue.use(vueRouter); // 使用vueRouterconst router = new vueRouter(routerConfig); // 定义vueRouter实例new Vue({ router, // 挂载vueRouter el: ‘#app‘, render: h => h(App)})
vue2.0学习笔记之webpack-simple模板中的路由简单配置案例
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。