vue2.0路由--vue-router

接着上一篇的项目MyFirstProject，写一个简单的路由：自动跳转首页，页面有新闻，关注，新闻页面下有嵌套路由新闻1，新闻2...  
开始吧：

1，安装vue-router, 打开cmd窗口，跳转到项目目录下，

npm install vue-router -D

打开package.json,在"devDependencies"中你会发现刚刚安装的vue-router

2，准备各个页面，目录结构如下：



3，新建router.js并配置路由

import Home from './components/Home.vue'
import News from './components/News.vue'
import News1 from './components/News1.vue'
import News2 from './components/News2.vue'
import Focus from './components/Focus.vue'

export default[
{
path:'/home',
component:Home
},{
path:'/news',
component:News,
children:[
{
path:'news1',
component:News1
},{
path:'news2',
component:News2
}
]
},{
path:'/focus',
component:Focus
},{
path:'/',
redirect:'/home'
}
]

4，main.js中引入vue-router

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import routes from './router.js'

Vue.use(VueRouter)
const router = new VueRouter({
routes
})

new Vue({
el: '#app',
router,
render: h => h(App)
})

5，完善App.vue

<template>
<div id="app">
<h1> {{ msg}} </h1>
<ul>
<router-link tag="li" to="/home">主页</router-link>
<router-link tag="li" to="/news">新闻</router-link>
<router-link tag="li" to="/focus">关注</router-link>
</ul>
<router-view></router-view>
</div>
</template>

<script>
export default {
name: 'app',
data () {
return {
msg: '这是我的第一个vue项目哦'
}
}
}
</script>

<style>
@import './assets/style.css';
</style>

其余页面：

Home.vue

<template>
<div id="home">
<p>我是主页内容</p>
</div>
</template>

News.vue

<template>
    <div id="news">
        <ol>
            <router-link to="/news/news1" tag="a">新闻一</router-link>
            <router-link to="/news/news2" tag="a">新闻二</router-link>
        </ol>
        <div class="newscontent">
            <router-view></router-view>
        </div>
    </div>
</template>

New1.vue

<template>
<div>
<p>
WannaCry勒索到你了吗？
</p>
</div>
</template>

News2.vue

<template>
<div>
<p>
听说WannaCry勒索了全世界，然额赎金只到手5万美元
</p>
</div>
</template>

Focus.vue

<template>
<div id="focus">
我是关注内容
</div>
</template>

展示如下：