npm install vue-router --save / cnpm install vue-router --save
import VueRouter from 'vue-router';
Vue.use(VueRouter)
import Home from './components/Home.vue';
import News from './components/News.vue';
const routes=[
{path:'/home',component:Home},
{path:'/news',component:News},
{path:'*',redirect:'/home'} //默认路由跳转到首页
]
//注意,这里是routes,而不是routers
const router=new VueRouter({
routes//(缩写)相当于routes:routes
})
new Vue({
el: '#app',
router,
render: h => h(App)
})
<router-view></router-view>
<router-link to="/home">首页</router-link>
<router-link to="/news">新闻</router-link>
import Vue from 'vue';
import App from './App.vue';
import VueResource from 'vue-resource';
Vue.use(VueResource)
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'} //默认路由跳转到首页
]
//注意,这里是routes,而不是routers
// 3.实例化VueRouter
const router=new VueRouter({
routes//(缩写)相当于routers:routers
})
// 4.挂载
new Vue({
el: '#app',
router,
render: h => h(App)
})
// 5.将<router-view></router-view>放在App.vue里面
<template>
<div id="app">
<h2>{{msg}}</h2>
<router-view></router-view>
<router-link to="/home">首页</router-link>
<router-link to="/news">新闻</router-link>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
msg:'根组件'
}
},
methods:{
},
}
</script>
<style>
</style>