07：vue定义路由

1.1 定义路由

　　1、说明

　　　　　　1. 路由是单页面应用程序（SPA）的关键，Vue提供过来路由插件，使用这个路由就要安装这个插件

　　　　　　2. 安装： npm install vue-router

　　　　　　3. 依赖于vue文件，所有要优先引入vue

　　　　　　4. 引入路由之后，我们就可以基于组件+路由实现单页面应用程序开发

　　　　　　5. 路由使用官网: https://router.vuejs.org/zh-cn/

　　2、路由作用

　　　　　　1. 定义组件分成三步：1 定义组件容器元素， 2 定义组件类， 3 注册组件

　　　　　　2. 当使用路由的时候，这三步就抽象成一步，我们只需要定义一个组件类参数对象即可

　　　　　　3. 所以使用路由，让我们定义组件变得简单了，这里的组件对象，只能被路由使用

　　3、使用路由分成以下三步

　　　　1. 第一步定义路由规则

　　　　　　　　1. var routes = [{}, {}]，每一个参数代表一个路由对象
　　　　　　　　2. path定义规则；name定义路由名称；component 表示路由的组件：这里使用组件对象

　　　　2. 第二步实例化路由对象

　　　　　　　　1. 实例化时候，我们要添加路由规则

　　　　3. 第三步在vue实例化对象中，注册路由

　　　　　　　　1. 第一件事注册路由

　　　　　　　　2. 第二件事定义路由渲染的容器（在模板中） router-view，渲染的时候，router-view会自动删除

注：在访问的url后面加上 #/home、#/detail、#/list 就会显示对应的组件内容

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>

</head>

<body>

    <div id="app">

        <h1>vue实例化对象</h1>

        <router-view></router-view>        <!--定义渲染容器-->

    </div>

    <script type="text/javascript" src="vue.js"></script>

    <script type="text/javascript" src="vue-router.js"></script>

    <script>

        var Home = {

            template:'<h1>home</h1>'

        };

        var List = {

            template:'<h1>list {{msg}}</h1>',

            data:function () {

                return {

                    msg: 'hello'

                }

            }

        };

        var Detail = {

            template:'<h1>detail</h1>',

        };

        // 第一步：定义路由规则

        var routes = [

            {

                path:'/home',

                name:'home',

                component:Home

            },

            {

                path:'/list',

                name:'list',

                component:List

            },

            {

                path:'/detail',

                name:'detail',

                component:Detail

            },

        ];

        // 第二步：实例化路由对象

        var router = new VueRouter({

            routes:routes

        });

        // 第三步：在vue实例化对象中注册路由

        var app = new Vue({

            el:'#app',

            router:router

        })

    </script>

</body>

</html>

路由基本使用

1.2 路由参数

　　1、路由参数说明

　　　　　　1. 一个 ‘’/” 将路由切割成一个一个模块，这些模块默认都是静态路由

　　　　　　2. 静态路由是不能变的，一个规则对应一个路径

　　　　　　3. 动态路由：一个规则对应多个路径

　　　　　　4. 例如 /page/:pageNum

　　　　　　　　匹配： /page/10, /page/100, /page/hello

　　　　　　　　不匹配： /list/10, /page/10/abc

　　2、路由参数使用范围

　　　　　　1. 动态的路由参数是可以捕获的，并且在任何组件中（vue实例化对象），都可以捕获或

　　　　　　2. 每一个组件实例化对象，都添加了一个$route的参数，定义在组件实例化对象的原型上。

　　　　　　3. 通过params属性，即可获取动态路由参数 $route.params.id （在控制台可以这样获取：app.$route）

　　　　　　4. 通过query属性，获取query参数 $route.query.word （在控制台可以这样获取： app.$route.query）

注：这种定义放法在url后面加上 #/detail不会访问组件，只有像这样 #/detail/20?word=hello 才可以访问

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>

</head>

<body>

    <div id="app">

        <h1>vue实例化对象</h1>

        <router-view></router-view>        <!--定义渲染容器-->

    </div>

    <script type="text/javascript" src="vue.js"></script>

    <script type="text/javascript" src="vue-router.js"></script>

    <script>

        var Detail = {

            template:'<h1>detail --- {{$route.params.id}}---{{$route.query.word}}</h1>',

        };

        // 第一步：定义路由规则

        var routes = [

            {

                // 多个商品对应一个页面

                path:'/detail/:id',

                name:'detail',

                component:Detail

            }

        ];

        // 第二步：实例化路由对象

        var router = new VueRouter({

            routes:routes

        });

        // 第三步：在vue实例化对象中注册路由

        var app = new Vue({

            el:'#app',

            router:router

        })

    </script>

</body>

</html>

路由参数

1.3 嵌套路由

　　1、嵌套路由说明

　　　　　　1. 路由可以嵌套定义。也就是说路由中可以定义其子路由

　　　　　　2. 分成两步：

　　　　　　　　第一步在路由的模板中，定义router-view元素，定义渲染的容器

　　　　　　　　第二步在路由对象中添加children属性，属性值是数组，

　　2、嵌套路由举例

　　　　　　1. 如果路径后加上 #/home 仅显示home页面组件

　　　　　　2. 如果路径加上 #/home/search 会同时显示home组价和子组件 search组件中内容

　　　　　　3. 由于 page子路由中写的是绝对路径 '/page' 所以访问路径变成 #/page 而不用加上父路径home，显示home组件和page组件

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>

</head>

<body>

    <div id="app">

        <h1>vue实例化对象</h1>

        <router-view></router-view>        <!--定义渲染容器-->

    </div>

    <template id="home">

        <div>

            <h1>home</h1>

             <router-view></router-view>       <!--第一步：定义子路由渲染的容器-->

        </div>

    </template>

    <script type="text/javascript" src="vue.js"></script>

    <script type="text/javascript" src="vue-router.js"></script>

    <script>

        var Home = {

            template:'#home',

            // 添加子路由

        };

        var Page = {

            template: '<h2>page</h2>'

        };

        // 第一步：定义路由规则

        var routes = [

            {

                path:'/home',

                name:'home',

                component:Home,

                children:[

                    {path:'/page',component:Page},                             // 如果子路由的路径是绝对路径，结果就是该绝对路径

                    {path:'search',component:{template:'<h2>search</h2>'}},   // 如果子路由的路径是相对路径，结果就是父路径+子路径

                ]

            }

        ];

        // 第二步：实例化路由对象

        var router = new VueRouter({

            routes:routes

        });

        // 第三步：在vue实例化对象中注册路由

        var app = new Vue({

            el:'#app',

            router:router

        })

    </script>

</body>

</html>

嵌套路由

1.4 路由重定向

　　1、说明

　　　　　　1. 我们可以定义路由对象的path属性是*,此时会匹配所有的路径，

　　　　　　2. 然后再定义redirect可以将路由重定向到某个路由，实现默认路由的定义

　　　　　　注意：由于*匹配的广，因此定义在最后面

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>

</head>

<body>

    <div id="app">

        <h1>vue实例化对象</h1>

        <router-view></router-view>        <!--定义渲染容器-->

    </div>

    <script type="text/javascript" src="vue.js"></script>

    <script type="text/javascript" src="vue-router.js"></script>

    <script>

        var Home = {

            template:'<h1>home</h1>'

        };

        var List = {

            template:'<h1>list {{msg}}</h1>',

            data:function () {

                return {

                    msg: 'hello'

                }

            }

        };

        var Detail = {

            template:'<h1>detail</h1>',

        };

        // 第一步：定义路由规则

        var routes = [

            {

                path:'/home',

                name:'home',

                component:Home

            },

            {

                path:'/list',

                name:'list',

                component:List

            },

            {

                path:'/detail',

                name:'detail',

                component:Detail

            },

            {

                path:'*',

                redirect:'/home'  // 重定向

            }

        ];

        // 第二步：实例化路由对象

        var router = new VueRouter({

            routes:routes

        });

        // 第三步：在vue实例化对象中注册路由

        var app = new Vue({

            el:'#app',

            router:router

        })

    </script>

</body>

</html>

路由重定向

1.5 路由导航：router-link

　　1、router-link 标签用法

　　　　　　1. Vue-router提供了router-link标签元素，可以定义标签导航

　　　　　　2. 本质上我们可以通过a标签的href来实现指向，但是router-link功能更强大

　　　　　　3. 标签中可以使用下面三个常用属性：

　　　　　　　　1）to指向路径，注意：加上:(v-bind:) 可以使用变量

　　　　　　　　2）v-text设置内容，还可以将内容直接写在标签内

　　　　　　　　3）tag：定义标签的类型

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>

</head>

<body>

    <div id="app">

        <!--<a href="#/list">列表页</a>-->

        <!--<a href="#/detail">详情页</a>-->

        <router-link :to="'/list'" v-text="'列表页01'" tag="span"></router-link>

        <router-link :to="'/detail'" v-text="'详情页01'"></router-link>

        <h1>vue实例化对象</h1>

        <router-view></router-view>        <!--定义渲染容器-->

    </div>

    <script type="text/javascript" src="vue.js"></script>

    <script type="text/javascript" src="vue-router.js"></script>

    <script>

        var Home = {

            template:'<h1>home</h1>'

        };

        var List = {

            template:'<h1>list {{msg}}</h1>',

            data:function () {

                return {

                    msg: 'hello'

                }

            }

        };

        var Detail = {

            template:'<h1>detail</h1>',

        };

        // 第一步：定义路由规则

        var routes = [

            {

                path:'/home',

                name:'home',

                component:Home

            },

            {

                path:'/list',

                name:'list',

                component:List

            },

            {

                path:'/detail',

                name:'detail',

                component:Detail

            },

        ];

        // 第二步：实例化路由对象

        var router = new VueRouter({

            routes:routes

        });

        // 第三步：在vue实例化对象中注册路由

        var app = new Vue({

            el:'#app',

            router:router

        })

    </script>

</body>

</html>

路由导航