vue-cli搭建后如何加入新页面

使用vue-router配置路由 在vue根实例中注入

import Vue from 'vue'
import VueRouter from 'vue-router'

import topNav from '../components/topNav'
import mine from '../components/mine'
import searchPage from '../components/searchPage'
import searchResult from '../components/searchResult'
import playPage from '../components/playPage'
import playbottom from '../components/playbottom'
import latestPlay from '../components/latestPlay'

Vue.use(VueRouter)

const router = new VueRouter({
routes: [
{
path: '/',
component: mine
},
{
path: '/mine',
component: mine
},
{
path: '/mine/searchPage',
component: searchPage
},
{
path: '/mine/searchPage/searchResult',
component: searchResult
},
{
path: '/playPage',
component: playPage
},
{
path: '/latestPlay',
component: latestPlay
}

]
})
export default router

import router from '../router'
var app = new Vue({
el: "#app1",
router,
store: vuex_store,
})

大概就是这样 链接用<router-link to="/play"></router-link>这样

昨天温故了一下vue2.0的路由 做个笔记简单记录一下！

1.首相和vue1.0一样 要使用vuejs的路由功能需要先引入vue-router.js

2.然后修改原有a标签处代码 这里以一个ul li a 为例

<ul>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>

使用 router-link标签替换原有a标签出 router-link会默认生成一个a标签  里面的to="" 指的是访问 to="home" 就是访问home， to="news" 就是访问news  经过改装后代码如下

<ul>
<li><router-link  to="/home">主页</router-likn></li>
<li><router-link  to="/news">新闻</router-likn></li>
</ul>

3.在第一步的时候引入了vue-router.js 现在需要创建一个 路由的实例

const router = new VueRouter({
routes
})

上面的routes是具体的路由配置信息具体配置如下

const routes = [
{path:'/home',component:Home},
{path:'/news',component:News}
]

path指的是访问的网址 对应上面<router-link to="xxx">里的to属性，后面component指的是对应模板

4.最后需要在调用出指定我们定义的上述定义的router

new Vue({
router,
el:'xxxx'
})

 

 总结：总体来讲vue2.0比起老版本要简单很多