vuerouter-1.路由基础

1.路由
注意
2.安装
npm install vue-router --save
3.在项目中使用它，明确的通过Vue.use()安装路由功能
import VueRouter from 'vue-router'
Vue.use(VueRouter)
4.创建路由
//创建路由
const router=new VueRouter({
routes:[
{
path:"/",
name:"HelloWorld",
component:HelloWorld
}
]
})
5.给出路由显示的位置
<router-view />
6.将路由对象注入new实例对象中
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})

实例------------------------------------------------------------------------------------------------------------------------------

// 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 VueRouter from 'vue-router'
import HelloWorld from './components/HelloWorld'
Vue.use(VueRouter)
Vue.config.productionTip = false

//创建路由
const router=new VueRouter({
routes:[
{
path:"/h",
name:"HelloWorld",
component:HelloWorld
}
]
})

/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})

转载于:https://www.cnblogs.com/xiao-peng-ji/p/11334694.html