vue路由配置
1.安装
npm install vue-router --save / cnpm install vue-router --save
2.引入并 Vue.use(VueRouter)(main.js)
import VueRouter from 'vue-router'
Vue.use(VueRouter)
3.配置路由
1、创建组件 引入组件
2、定义路由 （建议复制s）
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar },
{ path: '*', redirect: '/home' } /*默认跳转路由*/
]
3、实例化VueRouter
const router = new VueRouter({
routes // （缩写）相当于 routes: routes
})
4、挂载
new Vue({
el: '#app',
router，
render: h => h(App)
})
5 、根组件的模板里面放上这句话 <router-view></router-view>
6、路由跳转
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
常使用：
在router文件夹下index.js里
import Vuefrom 'vue'
import Routerfrom 'vue-router'
Vue.use(Router);
export default new Router({
routes: [
{
path:'/home',
name:'Home',
component:function(resolve){
require(["@/page/home"], resolve);
}
},
{
path:'/news',
name:'News',
component:function(resolve){
require(["@/page/news"], resolve);
}
},
{
path:'/newsDetail',
name:'NewsDetail',
component:function(resolve){
require(["@/page/newsDetail"], resolve);
}
},
{
path:'*',
redirect:'/home'
},//默认配置路由
]
})
在main.js里
new Vue({
el:'#app',
router,
components: { App },
template:'<App/>'
})
