2018-8-30-router的自我反思与总结一

一、在 main.js 中进行的思考

//引入一堆
import Vue from 'vue';
import VueRouter from 'vue-router';

//主体
import App from './components/app.vue';
import Home from './components/home.vue'

//安装插件，挂载属性
Vue.use(VueRouter);

//创建路由对象并配置路由规则
let router = new VueRouter({
  
    routes: [
        //一个个对象
        { path: '/home', component: Home }

    ]
});

//new Vue 启动
new Vue({
    el: '#app',
    //让vue知道我们的路由规则
    router: router, //可以简写router
    render: c => c(App),
})

一行行的读代码，发现也就是这么回事。

二、main.js 中的深入思考

//引入一堆
import Vue from 'vue';
import VueRouter from 'vue-router';

//主体
import App from './components/app.vue';
//路由切换页面
import List from './components/list.vue'
import Detail from './components/detail.vue'

//安装插件，挂载属性
Vue.use(VueRouter);

//创建路由对象并配置路由规则
let router = new VueRouter({
    //routes
    routes: [
        //一个个对象
        { name: 'list', path: '/list', component: List },
        //以下规则匹配  /detail? xxx = xx & xxx = xxx 多少个查询字符串都不影响
        //查询字符串path不用改
        { name: 'detail', path: '/detail', component: Detail },
        //  {name:'detail',params:{id:index}  } -> /detail/12
        { name: 'detail', path: '/detail/:id', component: Detail }

    ]
});

//new Vue 启动
new Vue({
    el: '#app',
    //让vue知道我们的路由规则
    router, //可以简写router
    render: c => c(App),
})

三、细节的路由属性

<template>
    <div>
        详情
    </div>
</template>
<script>
    export default {
        data(){
            return {

            }
        },

       //DOM还未生成
        created(){
            //获取路由参数
            //vue-router中挂载两个对象的属性
            //$route（信息数据）  $router (功能函数)

            console.log(this.$route.query);
            console.log(this.$route.params);
        }

        //已经将数据装载到页面上去了，DOM、已经生成
        ,mounted(){

        }
    }
</script>
<style>
    
</style>

***********************************

<template>
    <div>
        查询字符串列表:
        <ul>
            <li v-for="(hero,index) in heros" :key="index">
                    {{hero.name}}  
                    <!-- 1:去哪里  /detail?id=12 -->
                    <router-link :to="{name:'detail',query:{id:index}  }">查看</router-link>
            </li>
        </ul>
       <!--   path列表:
        <ul>
            <li v-for="(hero,index) in heros" :key="index">
                    {{hero.name}}  
                    1:去哪里  /detail/12
                    <router-link :to="{name:'detail',params:{id:index}  }">查看</router-link>
            </li>
        </ul> -->
    </div>
</template>
<script>
    export default {
        data(){
            return {
                heros:[{
                    name:'李白'
                },{
                    name:'王昭君'
                }]
            }
        }
    }
</script>
<style>
</style>