https://router.vuejs.org/

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>

代码实现如下

src/components/Home.vue

<template>
    <!-- 所有的内容要被根节点包含起来 -->
    <div id="home">    
       我是首页组件
    </div>
</template>
<script>
    export default{
        data(){
            return {               
               msg:'我是一个home组件'
            }
        }
    }
</script>
<style lang="scss" scoped>  
</style>

src/components/News.vue

<template>    
    <div id="news">    
       我是新闻组件                   
    </div>
</template>
<script>
    export default{
        data(){
            return {               
               msg:'我是一个新闻组件'              
            }
        }
    }
</script>
<style lang="scss" scoped>    
</style>

App.vue

<template>
  <div id="app"> 
    <router-link to="/home">首页</router-link>
    <router-link to="/news">新闻</router-link>
    <hr>
       <router-view></router-view>
  </div>
</template>
<script>
   export default {     
      data () { 
        return {  
         msg:'你好vue'
        }
      }     
    }
</script>
<style lang="scss">
</style>

main.js


import Vue from 'vue';
import App from './App.vue';

import VueRouter from 'vue-router';
Vue.use(VueRouter);
//1.创建组件
import Home from './components/Home.vue';
import News from './components/News.vue';
//2.配置路由   注意：名字
const routes = [
  { path: '/home', component: Home },
  { path: '/news', component: News },
  { 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> 放在 App.vue

Vue动态路由get传参

src/components/Content.vue

<template>   
    <div id="content">    
       我是详情页面
    </div>
</template>
<script>    
    export default{
        data(){
            return{
                msg:'数据'
            }
        },
        mounted(){
                console.log(this.$route.params);  /*获取动态路由传值*/
        }
    }
</script


src/components/Home.vue

<template>
    <!-- 所有的内容要被根节点包含起来 -->
    <div id="home">    
       我是首页组件
        <ul>
            <li v-for="(item,key) in list">
                <router-link :to="'/pcontent?id='+key">{{key}}--{{item}}</router-link>
            </li>
        </ul>
    </div>
</template>
<script>
    export default{
        data(){
            return {               
               msg:'我是一个home组件',
               list:['商品111111','商品222222','商品333333']    
            }
        }
    }
</script>
<style lang="scss" scoped> 
</style>

src/components/News.vue

<template>    
    <div id="news">    
       我是新闻组件   
     <ul>
        <li v-for="(item,key) in list">
             <router-link :to="'/content/'+key">{{key}}--{{item}}</router-link>
        </li>
     </ul>         
    </div>
</template>
<script>
    export default{
        data(){
            return {               
               msg:'我是一个新闻组件'  ,    
               list:['111111','222222','333333']        
            }
        }
    }
</script>
<style lang="scss" scoped>    
</style>

src/components/Pcontent.vue

<template>   
    <div id="content">    
      商品详情
    </div>
</template>
<script>    
    export default{
        data(){
            return{
                msg:'数据'
            }
        },
        mounted(){
              //获取get传值
              console.log(this.$route.query);
        }
    }
</script>

App.vue


<template>
  <div id="app"> 
    <router-link to="/home">首页</router-link>
    <router-link to="/news">新闻</router-link>
    <hr>
       <router-view></router-view>
  </div>
</template>
<script>
/*1、不同路由传值：动态路由
    1、配置动态路由
       routes: [
        // 动态路径参数 以冒号开头
        { path: '/user/:id', component: User }
      ]
    2、在对应的页面
      this.$route.params获取动态路由的值
*/
   export default {     
      data () { 
        return {         
         msg:'你好vue'
        }
      }   
    }
</script>
<style lang="scss">
</style>

main.js

import Vue from 'vue';
import App from './App.vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
//1.创建组件
import Home from './components/Home.vue';
import News from './components/News.vue';
import Content from './components/Content.vue';
import Pcontent from './components/Pcontent.vue';
//2.配置路由   注意：名字
const routes = [
  { path: '/home', component: Home },
  { path: '/news', component: News },
  { path: '/content/:aid', component: Content },   /*动态路由*/
  { path: '/pcontent', component: Pcontent },
  { 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> 放在 App.vue

vue路由结合请求数据 实现新闻列表 新闻详情数据渲染

代码如下

  src/components/Content.vue

<template>   
    <div id="content">    
        <h2>{{list.title}}</h2>
        <div v-html="list.content"></div>
    </div>
</template>
<script>  
    export default{
        data(){
            return{
                msg:'数据',
                list:[]
            }
        },
        mounted(){
               // console.log(this.$route.params);  /*获取动态路由传值*/
                var aid=this.$route.params.aid;
                //调用请求数据的方法
                this.requestData(aid);
        },
        methods:{
            requestData(aid){
                //get请求如果跨域的话 后台php java 里面要允许跨域请求
                var api='http://www.phonegap100.com/appapi.php?a=getPortalArticle&aid='+aid;
                this.$http.get(api).then((response)=>{
                        console.log(response);
                        this.list=response.body.result[0];
                },(err)=>{
                    console.log(err)
                })
            }
        }
    }
</script>
<style lang="scss">
#content{
    padding:1rem;
    line-height:2;
    img{
        max-width:100%;
    }
}    
</style>

Home.vue

<template>
    <!-- 所有的内容要被根节点包含起来 -->
    <div id="home">    
       我是首页组件       
    </div>
</template>
<script>
    export default{
        data(){
            return {               
               msg:'我是一个home组件'             
            }
        }
    }
</script>
<style lang="scss" scoped>    
</style>

src/component/News.vue

<template>    
    <div id="news">    
       我是新闻组件   
     <ul class="list">
        <li v-for="(item,key) in list">
             <router-link :to="'/content/'+item.aid">{{item.title}}</router-link>
        </li>
     </ul>          
    </div>
</template>
<script>
    export default{
        data(){
            return {               
               msg:'我是一个新闻组件'  ,    
               list:[]        
            }
        },
        methods:{
            requestData(){
                //jsonp请求的话  后台api接口要支持jsonp
                var api='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1';
                this.$http.jsonp(api).then((response)=>{
                   console.log(response);
                   //注意：用到this要注意this指向
                   this.list=response.body.result;
                },function(err){
                        console.log(err);
                })
            }
        },
        mounted(){
            this.requestData();
        }
    }
</script>
<style lang="scss" scoped>    
    .list{
        li{
            height:3.4rem;
            line-height:3.4rem;
            boder-bottom:1px solid #eee;
            font-size:1.6rem;
            a{
                color:#666;               
            }
        }
    }
</style>

App.vue

<template>
  <div id="app"> 
    <header class="header">
      <router-link to="/home">首页</router-link>
      <router-link to="/news">新闻</router-link>
    </header>
    <hr>
       <router-view></router-view>
  </div>
</template>
<script>
/*1、不同路由传值：动态路由
    1、配置动态路由
       routes: [
        // 动态路径参数 以冒号开头
        { path: '/user/:id', component: User }
      ]
    2、在对应的页面
      this.$route.params获取动态路由的值
*/
   export default {     
      data () { 
        return {     
         msg:'你好vue'
        }
      }     
    }
</script>
<style lang="scss">
  .header{
    height:4.4rem;
    background:#000;
    color:#fff;
    line-height:4.4rem;
    text-align:center;
    a{
      color:#fff;
      padding:0 2rem
    }
  }
</style>

main.js

import Vue from 'vue';
import App from './App.vue';
//引入公共的scss   注意：创建项目的时候必须用scss
import './assets/css/basic.scss';   
//请求数据
import VueResource from 'vue-resource';
Vue.use(VueResource);
import VueRouter from 'vue-router';
Vue.use(VueRouter);
//1.创建组件
import Home from './components/Home.vue';
import News from './components/News.vue';
import Content from './components/Content.vue';
//2.配置路由   注意：名字
const routes = [
  { path: '/home', component: Home },
  { path: '/news', component: News },
  { path: '/content/:aid', component: Content },   /*动态路由*/
  { 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> 放在 App.vue

vue路由编程式的导航 以及vue路由HIstory模式 hash模式

<template>   
    <div id="content">    
        <h2>{{list.title}}</h2>
        <div v-html="list.content"></div>
    </div>
</template>
<script> 
    export default{
        data(){
            return{
                msg:'数据',
                list:[]
            }
        },
        mounted(){
               // console.log(this.$route.params);  /*获取动态路由传值*/
                var aid=this.$route.params.aid;
                //调用请求数据的方法
                this.requestData(aid);
        },
        methods:{
            requestData(aid){
                //get请求如果跨域的话 后台php java 里面要允许跨域请求
                var api='http://www.phonegap100.com/appapi.php?a=getPortalArticle&aid='+aid;
                this.$http.get(api).then((response)=>{
                        console.log(response);
                        this.list=response.body.result[0];
                },(err)=>{
                    console.log(err)
                })
            }
        }
    }
</script>
<style lang="scss">
#content{
    padding:1rem;
    line-height:2;
    img{
        max-width:100%;
    }
}
</style>


<template>
    <!-- 所有的内容要被根节点包含起来 -->
    <div id="home">    
       我是首页组件
        <button @click="goNews()">通过js跳转到新闻页面</button>   
    </div>
</template>
<script>
    export default{
        data(){
            return {               
               msg:'我是一个home组件'            
            }
        },
        methods:{
            goNews(){
                // 注意：官方文档写错了
                //第一种跳转方式
                // this.$router.push({ path: 'news' })
                // this.$router.push({ path: '/content/495' });
                //另一种跳转方式
                    //   { path: '/news', component: News,name:'news' },
                    // router.push({ name: 'news', params: { userId: 123 }})
                    this.$router.push({ name: 'news'})
            }
        }
    }
</script>
<style lang="scss" scoped>
</style>


<template>    
    <div id="news">    
       我是新闻组件   
     <ul class="list">
        <li v-for="(item,key) in list">
             <router-link :to="'/content/'+item.aid">{{item.title}}</router-link>
        </li>
     </ul>         
    </div>
</template>
<script>
export default{
        data(){
            return {               
               msg:'我是一个新闻组件'  ,    
               list:[]        
            }
        },
        methods:{
            requestData(){
                //jsonp请求的话  后台api接口要支持jsonp
                var api='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1';
                this.$http.jsonp(api).then((response)=>{
                   console.log(response);
                   //注意：用到this要注意this指向
                   this.list=response.body.result;
                },function(err){
                        console.log(err);
                })
            }
        },
        mounted(){

            this.requestData();
        }
    }
</script>
<style lang="scss" scoped>
    .list{
        li{
            height:3.4rem;
            line-height:3.4rem;
            boder-bottom:1px solid #eee;
            font-size:1.6rem;
            a{
                color:#666;    
            }
        }
    }
</style>

<template>
  <div id="app"> 
    <header class="header">
      <router-link to="/home">首页</router-link>
      <router-link to="/news">新闻</router-link>
    </header>
    <hr>
       <router-view></router-view>
  </div>
</template>
<script>
/*1、不同路由传值：动态路由
    1、配置动态路由
       routes: [
        // 动态路径参数 以冒号开头
        { path: '/user/:id', component: User }
      ]
    2、在对应的页面
      this.$route.params获取动态路由的值
*/
   export default {     
      data () { 
        return {        
         msg:'你好vue'
        }
      }   
    }
</script>
<style lang="scss">
  .header{
    height:4.4rem;
    background:#000;
    color:#fff;
    line-height:4.4rem;
    text-align:center;
    a{
      color:#fff;
      padding:0 2rem
    }
  }
</style>


import Vue from 'vue';
import App from './App.vue';
//引入公共的scss   注意：创建项目的时候必须用scss
import './assets/css/basic.scss';   
//请求数据
import VueResource from 'vue-resource';
Vue.use(VueResource);
import VueRouter from 'vue-router';
Vue.use(VueRouter);
//1.创建组件
import Home from './components/Home.vue';
import News from './components/News.vue';
import Content from './components/Content.vue';
//2.配置路由   注意：名字
const routes = [
  { path: '/home', component: Home },
  { path: '/news', component: News,name:'news' },
  { path: '/content/:aid', component: Content },   /*动态路由*/
  { path: '*', redirect: '/home' }   /*默认跳转路由*/
]
//3.实例化VueRouter  注意：名字
const router = new VueRouter({
  mode: 'history',   /*hash模式改为history*/
  routes // （缩写）相当于 routes: routes
})
//4、挂载路由
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})
//5 <router-view></router-view> 放在 App.vue

Vue中路由的嵌套

component组件

<template>
    <div id="content">    
        <h2>{{list.title}}</h2>
        <div v-html="list.content"></div>
    </div>
</template>
<script>
    export default{
        data(){
            return{
                msg:'数据',
                list:[]
            }
        },
        mounted(){
               // console.log(this.$route.params);  /*获取动态路由传值*/
                var aid=this.$route.params.aid;
                //调用请求数据的方法
                this.requestData(aid);
        },
        methods:{
            requestData(aid){
                //get请求如果跨域的话 后台php java 里面要允许跨域请求
                var api='http://www.phonegap100.com/appapi.php?a=getPortalArticle&aid='+aid;
                this.$http.get(api).then((response)=>{
                        console.log(response);
                        this.list=response.body.result[0];
                },(err)=>{
                    console.log(err)
                })
            }
        }
    }
</script>
<style lang="scss">
#content{
    padding:1rem;
    line-height:2;
    img{
        max-width:100%;
    }
}
</style>


<template>
    <!-- 所有的内容要被根节点包含起来 -->
    <div id="home">    
       我是首页组件
        <button @click="goNews()">通过js跳转到新闻页面</button>       
    </div>
</template>
<script>
    export default{
        data(){
            return {               
               msg:'我是一个home组件'           
            }
        },
        methods:{
            goNews(){
                // 注意：官方文档写错了
                //第一种跳转方式
                // this.$router.push({ path: 'news' })
                // this.$router.push({ path: '/content/495' });
                //另一种跳转方式
                    //   { path: '/news', component: News,name:'news' },
                    // router.push({ name: 'news', params: { userId: 123 }})
                    this.$router.push({ name: 'news'})
            }
        }
    }
</script>
<style lang="scss" scoped>
</style>


<template>    
    <div id="news">    
       我是新闻组件   
     <ul class="list">
        <li v-for="(item,key) in list">
             <router-link :to="'/content/'+item.aid">{{item.title}}</router-link>
        </li>
     </ul>     
    </div>
</template>
<script>
    export default{
        data(){
            return {               
               msg:'我是一个新闻组件'  ,    
               list:[]        
            }
        },
        methods:{
            requestData(){
                //jsonp请求的话  后台api接口要支持jsonp
                var api='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1';
                this.$http.jsonp(api).then((response)=>{
                   console.log(response);
                   //注意：用到this要注意this指向
                   this.list=response.body.result;
                },function(err){
                        console.log(err);
                })
            }
        },
        mounted(){
            this.requestData();
        }
    }
</script>
<style lang="scss" scoped>
    .list{
        li{
            height:3.4rem;
            line-height:3.4rem;
            boder-bottom:1px solid #eee;
            font-size:1.6rem;
            a{
                color:#666;               
            }
        }
    }
</style>


<template>
    <!-- 所有的内容要被根节点包含起来 -->
    <div id="user">          
        <div class="user">       
                    <div class="left">    
                        <ul>
                            <li>
                               <router-link to="/user/useradd"> 增加用户</router-link>
                            </li>
                            <li>
                                 <router-link to="/user/userlist"> 用户列表</router-link>
                            </li>
                        </ul>               
                    </div>
                    <div class="right">          
                         <router-view></router-view>       
                     </div>      
         </div>       
    </div>
</template>
<script>
    export default{
        data(){
            return {               
               msg:'我是一个user组件'             
            }
        }       
    }

</script>
<style lang="scss" scoped>
    .user{
        display:flex;
        .left{
            width:200px;
            min-height:400px;
            border-right:1px solid #eee;
            li{
                line-height:2;
            }
        }
        .right{
            flex:1;
        }
    }
</style>


component/user/UserAdd.vue

<template>
    <div id="adduser">    
        增加用户
    </div>
</template>


component/user/UserList.vue
<template>
    <div id="adduser">    
        用户列表
    </div>
</template>



App.vue


<template>
  <div id="app"> 
    <header class="header">
      <router-link to="/home">首页</router-link>
      <router-link to="/news">新闻</router-link>
       <router-link to="/user/useradd">用户</router-link>
    </header>
    <hr>
       <router-view></router-view>
  </div>
</template>
<script>
   export default {     
      data () { 
        return {   
         msg:'你好vue'
        }
      } 
    }
</script>
<style lang="scss">
  .header{
    height:4.4rem;
    background:#000;
    color:#fff;
    line-height:4.4rem;
    text-align:center;
    a{
      color:#fff;
      padding:0 2rem
    }
  }
</style>


import Vue from 'vue';
import App from './App.vue';

//引入公共的scss   注意：创建项目的时候必须用scss
import './assets/css/basic.scss';   
/*路由的嵌套
  1.配置路由
   {
      path: '/user',
      component: User,
      children:[
        { path: 'useradd', component: UserAdd },

        { path: 'userlist', component: Userlist }

      ]

    }

  2.父路由里面配置子路由显示的地方   <router-view></router-view>
*/
//请求数据
import VueResource from 'vue-resource';
Vue.use(VueResource);

import VueRouter from 'vue-router';
Vue.use(VueRouter);
//1.创建组件
import Home from './components/Home.vue';
import News from './components/News.vue';
import Content from './components/Content.vue';
import User from './components/User.vue';
  import UserAdd from './components/User/UserAdd.vue';
  import Userlist from './components/User/Userlist.vue';
//2.配置路由   注意：名字
const routes = [
  { path: '/home', component: Home },
  { path: '/news', component: News,name:'news' },
  {       
    path: '/user',  
    component: User,
    children:[
      { path: 'useradd', component: UserAdd },
      { path: 'userlist', component: Userlist }
    ]
  },
  { path: '/content/:aid', component: Content },   /*动态路由*/
  { path: '*', redirect: '/home' }   /*默认跳转路由*/
]
//3.实例化VueRouter  注意：名字
const router = new VueRouter({
  mode: 'history',   /*hash模式改为history*/
  routes // （缩写）相当于 routes: routes
})

//4、挂载路由
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})
//5 <router-view></router-view> 放在 App.vue