Vue之 路由动态路由 嵌套路由 JS指定路由

动态路由1

//1.创建组件
import Content from ‘./components/Content.vue’;
//2.配置路由 注意：名字

const routes = [
  { path: '/content/:aid', component: Content },   /*动态路由*/
]`

3.在对应的显示的页面

    this .$route.params        获取动态路由的值

4.点击跳转到显示页面

   <ul>
         <li v-for="(item,key) in list" :key="item.id" >
        <router-link :to="'/content/'+ key" > {{key}}~~~ {{item}}</router-link> </li>
    </ul>
 

动态路由2

//1.创建组件

import Pcontent from './components/pcontent.vue';

//2.配置路由 注意：名字

const routes = [
  { path: '/pcontent', component: Pcontent },/*get 动态路由*/
]

3.在对应的显示的页面

this.$route.query

4.点击跳转到显示页面

 <ul>
   <li v-for="(item,key) in list" :key="item.id" >
   <router-link :to="'/Pcontent?aid='+ key" > {{key}}~~~ {{item}}</router-link>
 </li>
 </ul>

路由结合请求数据

//1.创建组件

import Content from ‘./components/Content.vue’;
//2.配置路由 注意：名字

const routes = [
 { path: '/content/:aid', component: Content },/*:aid 动态路由*/
]

3.在对应的显示的页面content

<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>

4.点击详情页面跳转到显示页面

  <template>
    <div id="News">
         <br>
        <hr>
        我是新闻组件
        <ul class="list">
            <li v-for="item in list"  :key="item.id">
               <router-link :to="'/content/'+item.aid">{{item.title}}</router-link>
            </li>
        </ul>  
    </div>
</template>   

 <script>

//引入 vue实例
    import VueEvent from '../model/VueEvent.js';
    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 long="css" scoped>
 .list{
     li{
     height: 3.4rem;
     line-height: 3.4rem;
     border-bottom: 1px solid #eee;
     font-size: 1.6rem;
     }   
     a{
       color: #666;
     }
 }

首面

  <div id="app"> 
   <header class="header">
      <router-link to='/home'>首页</router-link>
      <router-link to='/news'>新闻</router-link>
   </header>
   <router-view></router-view>
  </div>

显示

JS路由

按钮

<button @click="goNews()">通过JS跳转到新闻页面</button>

指定路由

1.  this.$router.push({path:'news'})    js指定路由页面
2. this.$router.push({path:'/content/495'}) js指定路由页面 中 详情

路由的嵌套

1.配置路由

import UserAdd from './components/User/UserAdd.vue';
import Userlist from './components/User/Userlist.vue';

 const routes = [
  { path: '/user', 
  component: User,
  children:[
    {path: 'useradd',component:UserAdd},
    {path: 'userlist',component:Userlist},
  ]
 },/*文件父子路由*/
]

2.父路由里面配置子路由显示的地方

 <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>

点击显示的二个页面 adduser和userlist

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

显示