Vue--路由

43、前端路由介绍

44、前端路由原理

45、vue-router的基本使用

46、命名路由的使用

47、小结

48、路由参数之params和query的使用

49、编程式导航

50-51、嵌套路由的使用及警告处理

52、动态路由匹配

53、keep-alive在路由中的使用

43、前端路由介绍

vue+vue-router主要来做单页面应用（SinglePageApplication）

为什么我们要做单页面应用？
1）传统的开发方式URL改变后，立马发送请求，响应整个页面，
有可能资源过多，传统开发会让前端页面出现“白屏”用户体验不好
2）SPA单页面应用：锚点值的改变后，不会立刻发送请求，而是在某个合适的时机
发送ajax请求，局部改变页面中的数据，页面不立刻跳转。用户体验好

44、前端路由原理

SPA:SinglePageApplication

1)锚点值监视
2）ajax获取动态的数据
3）核心点是锚点值的改变
前端中vue/react/angular都很适合做单页面应用

<body>
<a href="#/login">登录页面</a>
<a href="#/register">注册页面</a>
<div id="app">

</div>
<script type="text/javascript">
    window.onhashchange = function () {
        oDiv = document.getElementById('app');
        //onhashchange事件监听URL上锚点数据（#/xxx的改变）
        console.log(location.hash);
        //根据不同的锚点值，对页面不同的切换
        switch (location.hash) {
            case '#/login':
                oDiv.innerHTML='<h2>登录页面</h2>';
                break;
            case '#/register':
                oDiv.innerHTML='<h2>注册页面</h2>';
                break;
            default:
                break;
        }
    }
</script>
</body>

45、vue-router的基本使用

下载vue-router：

npm init --yes

npm install vue-router --save

router-link标签上不能用类似“@click”语句绑定事件，要这样绑定事件必须用a标签或者button按钮

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title> 
    </head>
    <body>
        <div id="app">
            <router-link to="/login">登录</router-link>
            <router-link to="/register">注册</router-link>
            <router-view></router-view>
        </div>
    </body>
    <script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript" src="./node_modules/vue-router/dist/vue-router.js"></script>
    <script type="text/javascript">
        // 0.如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)
        // 1. 定义模块
        const Login = {template:`<h1>登录页面</h1>`};
        const Register = {template:`<h1>注册页面</h1>`};
        // 2. 定义路由
        const routes = [{path:"/login", component:Login},{path:"/register", component:Register}];
        // 3. 实例化VueRouter
        let router = new VueRouter({
            routes:routes
        });
        // 4.在Vue中使用
        new Vue({
            router:router
        }).$mount("#app");
    </script>
</html>

vue-router简单示例

被选中的<router-link>标签有router-link-active样式，如果自己定义了一个a标签的样式，例如：a.is-active{ color: red} ，怎样让a标签的is-active应用到router-link标签上呢？？？

实例化VueRouter时，加上linkActiveClass:"is-active"即可

如果不想要路由时候的‘#’号，把路由模式改为‘history’模式即可

改之前：

改之后：

<body>
<div id="app">

</div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<!--1. 引入vue-router对象 全局的VueRouter对象-->
<script type="text/javascript" src="./node_modules/vue-router/dist/vue-router.js"></script>
<script type="text/javascript">
    // 2. 让Vue使用该VueRouter创建（如果使用模块化机制编程，导入Vue和VueRouter要写Vue.use(VueRouter),实际上此处可以不写）
    Vue.use(VueRouter);
         // 创建路由组件
    var Login = {
      template:`<h2>登录页面</h2>`
    };
    var Register = {
      template:`<h2>注册页面</h2>`
    };
    // 3. 创建一个路由对象
    var router = new VueRouter({
        // 配置路由对象
        routes:[
            {
                path:'/login',
                component:Login,
            },
            {
                path:'/register',
                component:Register,
            },
        ]
    });

    //4. 创建Vue对象
    var App={
        template:`<div>
    <router-link to="/login">登录页面</router-link>
    <router-link to="/register">注册页面</router-link>

    <div id="view">
    <router-view></router-view>
    </div>
</div>`
    };
    new Vue({
        el:'#app',
        template:`<App />`,
        components:{
            App
        },
        router,  //要让vue使用router
    })
</script>
</body>

效果：

46、命名路由的使用

<body>
<div id="app">

</div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<!--1. 引入vue-router对象 全局的VueRouter对象-->
<script type="text/javascript" src="./node_modules/vue-router/dist/vue-router.js"></script>
<script type="text/javascript">
    // 2. 让Vue使用该VueRouter创建
    Vue.use(VueRouter);
         // 创建路由组件
    var Login = {
      template:`<h2>登录页面</h2>`
    };
    var Register = {
      template:`<h2>注册页面</h2>`
    };
    // 3. 创建一个路由对象
    var router = new VueRouter({
        // 配置路由对象
        routes:[
            {
                path:'/login',
                name:'login', //命名路由
                component:Login,
            },
            {
                path:'/register',
                name:'register', //命名路由
                component:Register,
            },
        ]
    });

    //4. 创建Vue对象
    var App={
        template:`<div>
    <router-link :to="{name:'login'}">登录页面</router-link>
    <router-link :to="{name:'register'}">注册页面</router-link>

    <div id="view">
    <router-view></router-view>
    </div>
</div>`
    };
    new Vue({
        el:'#app',
        template:`<App />`,
        components:{
            App
        },
        router,  //要让vue使用router
    })
</script>
</body>

47、小结

1）引入vue-router的模块,产生VueRouter对象和两个全局组件router-link和router-view

我们可以在任何组件内通过 this.$router 访问路由器，

push方法： this.$router.push({ name: 'userp', params: { userId: '1' }}) ----当你点击 <router-link> 时，这个方法会在内部调用，所以说，点击等同于调用 router.push(…)。

repalce方法：this.$router.replace('/') // 一般使用replace来做404页面

也可以通过 this.$route 访问当前路由（http://xxx.com/code/1 或者 http://xxx.com/code?id=1 ） this.$route.params / this.$route.query / this.$route.path
2）Vue.use(VueRouter)
3）创建路由对象
4）路由对象挂载到vue实例化对象中
5）命名路由，给当前的配置路由信息对象设置name属性
:to="{name:'login'}"

48、路由参数之params和query的使用

两种路由范式如何实现？
1）xxx.html#/user/1
2）xxx.html#/user?userID=1

<body>
<div id="app">

</div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<!--1. 引入vue-router对象 全局的VueRouter对象-->
<script type="text/javascript" src="./node_modules/vue-router/dist/vue-router.js"></script>
<script type="text/javascript">
    // 2. 让Vue使用该VueRouter创建
    Vue.use(VueRouter);
         // 创建路由组件
    var UserParams = {
      template:`<h2>我是用户1</h2>`,
        created(){
          // console.log(this.$route);  //路由配置信息
          // console.log(this.$router);  //VueRouter对象
            //发送ajax请求
            console.log(this.$route.params.userId);  // 1
        }
    };
    var UserQuery = {
      template:`<h2>我是用户2</h2>`,
        created(){
          // 发送ajax请求
          console.log(this.$route.query.userId);  // 2
        }
    };
    // 3. 创建一个路由对象
    var router = new VueRouter({
        // 配置路由对象
        routes:[
            {
                // 路由范式一：xxx.html#/user/1
                path:'/user/:userId',
                name:'userp',
                component:UserParams,
            },
            {
                // 路由范式二：xxx.html#/user?userId=1
                path:'/user',
                name:'userq',
                component:UserQuery,
            },
        ]
    });

    //4. 创建Vue对象
    var App={
        template:`<div>
    <router-link :to="{name:'userp', params:{userId:1}}">用户1</router-link>
    <router-link :to="{name:'userq', query:{userId:2}}">用户2</router-link>

    <div id="view">
    <router-view></router-view>
    </div>
</div>`
    };
    new Vue({
        el:'#app',
        template:`<App />`,
        components:{
            App
        },
        router,  //要让vue使用router
    })
</script>
</body>

效果：

49、编程式导航

上面的例子可以用编程式导航来实现：

<body>
<div id="app">

</div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<!--1. 引入vue-router对象 全局的VueRouter对象-->
<script type="text/javascript" src="./node_modules/vue-router/dist/vue-router.js"></script>
<script type="text/javascript">
    // 2. 让Vue使用该VueRouter创建
    Vue.use(VueRouter);
         // 创建路由组件
    var UserParams = {
      template:`<h2>我是用户1</h2>`,
        created(){
          // console.log(this.$route);  //路由配置信息
          // console.log(this.$router);  //VueRouter对象
            //发送ajax请求
            console.log(this.$route.params.userId);  // 1
        }
    };
    var UserQuery = {
      template:`<h2>我是用户2</h2>`,
        created(){
          // 发送ajax请求
          console.log(this.$route.query.userId);  // 2
        }
    };
    // 3. 创建一个路由对象
    var router = new VueRouter({
        // 配置路由对象
        routes:[
            {
                // 路由范式一：xxx.html#/user/1
                path:'/user/:userId',
                name:'userp',
                component:UserParams,
            },
            {
                // 路由范式二：xxx.html#/user?userId=1
                path:'/user',
                name:'userq',
                component:UserQuery,
            },
        ]
    });

    //4. 创建Vue对象
    var App={
        template:`<div>
    <button type="button" @click="paramsHandler">用户1</button>
    <button type="button" @click="queryHandler">用户2</button>

    <div id="view">
    <router-view></router-view>
    </div>
</div>`,
        methods:{
            paramsHandler(){
                this.$router.push({ name: 'userp', params: { userId: '1' }})
            },
            queryHandler(){
                this.$router.push({ name: 'userq', query: { userId: '2' }})
            }
        }
    };
    new Vue({
        el:'#app',
        template:`<App />`,
        components:{
            App
        },
        router,  //要让vue使用router
    })
</script>
</body>

50-51、嵌套路由的使用及警告处理

嵌套路由：
一个router-view里面包含另一个router-view
例如：一个导航按钮点开，里面有子导航按钮
而且子导航按钮，各自打开的结构还不一样（不能用数据驱动视图）就要用到嵌套路由

<body>
<div id="app">

</div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<!--1. 引入vue-router对象 全局的VueRouter对象-->
<script type="text/javascript" src="./node_modules/vue-router/dist/vue-router.js"></script>
<script type="text/javascript">
    // 2. 让Vue使用该VueRouter创建
    Vue.use(VueRouter);
    /*
    嵌套路由：
    需求：进入首页之后 点击音乐/home/music 电影/home/movie
    加载两个不同的组件
     */
    var Home = {
      template:`<div>
        <router-link to="/home/music">音乐</router-link>
        <router-link to="/home/movie">电影</router-link>
        <router-view></router-view>
        </div>`,
    };
    var Music = {
      template:`<p>我是音乐</p>`
    };
    var Movie = {
      template:`<p>我是电影</p>`
    };
    // 3. 创建一个路由对象
    var router = new VueRouter({
        routes:[
            {
              path:'/',
              // redirect:{name:'home'}
              redirect:'/home'
            }, //默认跳转到/home
            {
                path:'/home',
                // name:'home',  //如果有这个会报警告，如果父路由有子路由时，父路由最好不要弄命名路由
                component:Home,
                //动态路由匹配 表示你的子组件中的结构是不同的
                children:[
                    //当访问/home时，Home组件的出口是不会渲染任何内容，这是因为没有匹配到合适的子路由，这样写表示渲染Music组件
                    {
                        path:'', //表示访问的/home
                        component:Music
                    },
                    {
                        path:'music',
                        component:Music
                    },
                    {
                        path:'movie',
                        component:Movie
                    },
                ]
            },
        ]
    });

    //4. 创建Vue对象
    var App={
        template:`<div>
        <router-link to="/home">首页</router-link>

    <div id="view">
    <router-view></router-view>
    </div>
</div>`,
    };
    new Vue({
        el:'#app',
        template:`<App />`,
        components:{
            App
        },
        router,
    })
</script>
</body>

效果：访问根路径后显示的页面

52、动态路由匹配

动态路由
跟嵌套路由相反，例如：一个导航按钮点开，里面有子导航按钮
而且子导航按钮，各自打开的结构一样，只是数据不同，可以用数据驱动视图，
这时，就要用到动态路由。

--------核心思想-------

[“Android” 链接+ “前端” 链接+其<router-view>] 都放在首页的<router-view>里面，

点击“Android” 或 “前端” 在其<router-view>里共享同一个组件

<body>
<div id="app">

</div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<!--1. 引入vue-router对象 全局的VueRouter对象-->
<script type="text/javascript" src="./node_modules/vue-router/dist/vue-router.js"></script>
<script type="text/javascript">
    // 2. 让Vue使用该VueRouter创建
    Vue.use(VueRouter);var Timeline = {
      template:`<div>
        <router-link :to="{name:'commonDesc', params:{id:'android'}}">Android</router-link>
        <router-link :to="{name:'commonDesc', params:{id:'frontend'}}">前端</router-link>

        <router-view></router-view>
</div>`
    };
    var Pins = {
      template:`<p>我是沸点</p>`
    };
    var CommonDesc = {
        data(){
          return {
              msg:'',
          }
        },
        template:`<p>我是一个{{msg}}</p>`,
        // 当使用路由参数时，例如从 /user/foo 导航到 /user/bar，原来的组件实例会被复用。
        // 因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。
        // 复用组件时，想对路由参数的变化作出响应的话，你可以简单地 watch (监测变化) $route 对象
        created(){
          this.msg = 'android';
        },
        watch:{
            $route(to, from){
                // console.log(from);   //更新前$route
                // console.log(to);     //更新后$route
                this.msg = to.params.id;
                console.log(this.msg);
            }
        }
    };
    // 3. 创建一个路由对象
    var router = new VueRouter({
        routes:[
            {
                path:'/timeline',
                component:Timeline,
                children:[
                    {
                        path:'',
                        component:CommonDesc
                    },
                    {
                        path:':id',
                        // path:'/timeline/:id',
                        name:'commonDesc',
                        component:CommonDesc
                    },
                ]
            },
            {
                path:'/pins',
                component:Pins,
            },
        ]
    });

    //4. 创建Vue对象
    var App={
        template:`<div>
        <router-link to="/timeline">首页</router-link>
        <router-link to="/pins">沸点</router-link>

    <div id="view">
    <router-view></router-view>
    </div>
</div>`,
    };
    new Vue({
        el:'#app',
        template:`<App />`,
        components:{
            App
        },
        router,
    })
</script>
</body>

53、keep-alive在路由中的使用

keep-alive的作用是将<router-view>里渲染的内容缓存起来，下次切换的时候直接使用。

keep-alive使用后，生命周期钩子函数中的created mounted 只调用一次， activated和deactivated生效

下面案例中：点击“沸点”，将字体变红，再点击“首页”，再点回“沸点”，字体颜色依然是红色，就是keep-alive的产生的缓存效果

<body>
<div id="app">

</div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<!--1. 引入vue-router对象 全局的VueRouter对象-->
<script type="text/javascript" src="./node_modules/vue-router/dist/vue-router.js"></script>
<script type="text/javascript">
    // 2. 让Vue使用该VueRouter创建
    Vue.use(VueRouter);
    var Timeline = {
      template:`<p>我是首页</p>`
    };
    var Pins = {
        template:`<p @click="clickHandler">我是沸点</p>`,
        methods:{
            clickHandler(e){
                e.target.style.color = 'red';
            }
        }
    };
    // 3. 创建一个路由对象
    var router = new VueRouter({
        routes:[
            {
                path:'/timeline',
                component:Timeline,
            },
            {
                path:'/pins',
                component:Pins,
            },
        ]
    });

    //4. 创建Vue对象
    var App={
        template:`<div>
        <router-link to="/timeline">首页</router-link>
        <router-link to="/pins">沸点</router-link>

    <div id="view">
    <keep-alive>
        <router-view></router-view>
    </keep-alive>
    </div>
</div>`,
    };
    new Vue({
        el:'#app',
        template:`<App />`,
        components:{
            App
        },
        router,
    })
</script>
</body>