study
/
vue
/
30th.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue-router</title>
    <script src="vue.js"></script>
    <script src="vue-router.min.js"></script>
    <style>
        .active{
            color: #f60;
        }
    </style>
    <script>
    /****
    单页面应用
    路由router 是把数据从一个地方传递到另一个地方的行为和动作
    vue-router.js
    使用步骤：
        1.定义组件
        2 配置路由
        3.创建路由实例,相当于一个管理者，来管理路由
        4.route 实例注入到Vue
    路由取参数:
        1.$route.params.id // test/5 id是参数名称,名称是路由配置中:id 名称
        2.$route.query.id  // test?id=123
    */
   window.onload = function(){

       //1.定义组件
        var Home = Vue.component('Home',{
            template:'<h2>My Home </h2>'
        });

        var News = Vue.component('News',{
            template:'<h2>My News {{$route.params.id}} {{$route.query.name}}</h2>'
        });


        //2.配置路由
        var routes = [
            {path:'/home',component:Home},
            {path:'/news/:id',component:News},
            {path:'/*',redirect:'/home'}//重定向
        ];

        //3.创建路由实例,相当于一个管理者，来管理路由
        var router = new VueRouter({
            routes, //表示接收routers参数
            linkActiveClass:'active'//设定路由样式
        });
        new Vue({
           el:'#my',
           router, //4.router实例注入到Vue
           data:{
               msg:'hello world',
               id:200
           }

        });
   }

    </script>
</head>
<body>


    <div id="my">
        <!--router-link 导航 ，默认被浏览器渲染成a标签-->
        <!-- to 属性指定跳转的连接，这个链接需要routers中已有对应路径-->
        <router-link to="/home">home</router-link>
        <router-link to="/news/15">news</router-link>
        <router-link :to="'/news/'+id ">dynamic params</router-link><!-- id是变量，动态传参使用 :to-->
        <router-link to="/news/name=hanley">url?name=xx格式</router-link>
        <div>
            <!--出口文件，路由匹配的组件渲染在出口文件中-->
            <router-view></router-view>
        </div>
    </div>
</body>
</html>