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