使用路由先安装路由模块:
npm install vue-router --save
第一步:创建组件
https://www.cnblogs.com/e0yu/p/9795686.html
第二步:main.js引入并使用vue路由
import VueRouter from 'vue-router';//引入组件Vue.use(VueRouter);//使用组件
第三步:引入组件
import Header from './components/Header.vue';import Hello from './components/Hello.vue';
第三步:配置路由
//配置路由const routes = [
{path:'header',components:Header},
{path:'hello',components:Hello},
]
第四步:实例化VueRouter
// 实例化 vurRouterconst router = new VueRouter({
routes: routes
})
第五步:在 App.vue下设置路由的出口
<router-view></router-view>
第六步:点击路由进行跳转
<router-link to="/header">首页</router-link><router-link to="/hello">你好</router-link>
第七步:配置默认路由
const routes = [{ path: '/home', component: Home },
{ path: '/news', component: News },
{ path: '*', redirect:'/home'}, // 默认跳转路由
]
示例代码:main.js
// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import VueResource from "vue-resource"
Vue.config.productionTip = false
import VueRouter from 'vue-router'
Vue.use(VueRouter)
// 1、创建组件
import Home from './components/Home.vue'
import News from './components/News.vue'
// 2、配置路由
const routes = [
{ path: '/home', component: Home },
{ path: '/news', component: News },
{ path: '*', redirect:'/home'}, // 默认跳转路由
]
// 3、实例化 vurRouter
const router = new VueRouter({
routes: routes
})
// 4、挂载路由
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
// 将 <router-view></router-view> 入口放到App.vue 里面
App.vue
<template><div >
<h1>{{msg}}</h1>
<router-link to="/home">首页</router-link>
<router-link to="/news">新闻</router-link>
<router-view></router-view/>
</div>
</template>
还没有评论,来说两句吧...