1.在idea中新建vue项目
2.main.js中修改
import Vue from 'vue'
// import Router from './Router' /*引用自同级Router.js*/
// import Router from './SonRouter' /*引用自同级SonRouter.js*/
import Router from './ComponentRouter' /*引用自同级ComponentRouter.js*/
3.src下新建文件ComponentRouter.js
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
//声明模版,点击链接显示对应的内容
const first = { template:'<div>first内容</div>'}
const second = { template:'<div>second内容</div>'}
const Home = { template:'<div>Home内容</div>'}
const HelloWorld = { template:'<div>{{$route.params.name}}</div>'}
//router自己定义名字
const router = new VueRouter({
mode:'history',
base:__dirname, //当前的路径 dirname在node中指当前的本地路径
routes:[ //以数组的方式给出 [{},{}],多个的话一定是routes复数形式
{path:'/',name:'Home', components:{
default:Home,
left:first,
right:second
}},
{path:'/first',name:'Home-First',components:{
default:HelloWorld,
left:first,
right:second
}}
]
})
new Vue({
router,
template:`
<div id='r'>
<h1>导航</h1>
<p>{{$route.name}}</p>
<ol>
<li><router-link to="/">/</router-link></li>
<li><router-link :to="{name:'Home-First',params:{id:258,name:'通过绑定to进行参数的传递'}}">/first</router-link></li>
</ol>
<router-view class="green"></router-view>
<router-view class="green" name="left" style="float: left;width: 50%;background-color: #FF6600;height: 300px"></router-view>
<router-view class="green" name="right" style="float: left;width: 50%;background-color: #FFF600;height: 300px"></router-view>
</div>
`
}).$mount('#app')
运行结果: