首页 > > 网页制作 > Javascript >

Vue.js 相关知识（路由）

2018-06-24 02:07:51来源：未知阅读 ()

1. 简介

路由，工作原理与路由器相似（路由器将网线总线的IP分发到每一台设备上），Vue中的路由根据用户在网页中的点击，将其引导到对应的页面。

2. 使用步骤

安装vue-router或者直接引入vue-router.js（下载地址：https://router.vuejs.org/）

例：SPA页面（Single Page Application，将一个网站的所有页面写在一个文件，通过不同的div进行区分，再通过div的显示、隐藏实现跳转效果）

定义组件对象（页面）、组件模板、注册组件
定义router-link、router-view
- router-link：组件会被解析为a标签
- router-view：路由显示的内容会在 router-view 中显示
定义路由规则
注册到根组件中

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript" src="vue.js"></script>    
    <script type="text/javascript" src="vue-router.js"></script>
</head>
<body>
    <div id="app">
        <!-- 4. 定义router-link、router-view -->
        <div>
            <router-link to='/home'>首页</router-link>
            <router-link to='/setting'>设置</router-link>
            <router-view></router-view>
        </div>        
    </div>
    <!-- 2. 定义组件模板 -->
    <template id="home">
        <div>
            <h3>首页页面</h3>
        </div>
    </template>
    <template id="setting">
        <div>
            <h3>设置页面</h3>
        </div>
    </template>
    <script type="text/javascript">
        //1. 定义组件对象
        let Home = {template:'#home'}
        let Setting = {template:'#setting'}
        //5. 定义路由规则
        let route = new VueRouter({
            routes:[
                {
                    path:'/home',
                    component:Home
                },
                {
                    path:'/setting',
                    component:Setting
                }
            ]        
        })
        let app = new Vue({
            el:"#app",
            //3. 注册到根组件中
            components:{
                Home,
                Setting
            },
            //6. 注册到根组件中
            router:route
        })            
    </script>
</body>
</html>

3. 嵌套路由

实际开发时，一个页面常会嵌套多个组件（页面），如：设置页面中包括个人设置、系统设置等

定义组件对象、组件模板、注册组件
定义router-link、router-view
- 嵌套的路由，router-link、router-view 定义在嵌套的地方
定义路由规则
- 嵌套的路由，通过 children 属性定义

  <div id="app">
        <!-- 4. 定义router-link、router-view -->
        <div>
            <router-link to='/home'>首页</router-link>
            <router-link to='/setting'>设置</router-link>
            <router-view></router-view>
        </div>        
    </div>
    <!-- 2. 定义组件模板 -->
    <template id="home">
        <div>
            <h3>首页页面</h3>
        </div>
    </template>
    <template id="setting">
        <div>
            <h3>设置页面</h3>
            <router-link to="/setting/user">个人设置</router-link>
            <router-link to="/setting/system">系统设置</router-link>
            <router-view></router-view>
        </div>
    </template>
    <template id="user">
        <div>
            <h3>个人设置页面</h3>
        </div>
    </template>
    <template id="system">
        <div>
            <h3>系统设置页面</h3>
        </div>
    </template>
    <script type="text/javascript">
        //1. 定义组件对象
        let Home = {template:'#home'}
        let Setting = {template:'#setting'}
        let User = {template:'#user'}
        let System = {template:'#system'}
        //5. 定义路由规则
        let route = new VueRouter({
            routes:[
                {
                    path:'/home',
                    component:Home
                },
                {
                    path:'/setting',
                    component:Setting,
                    children:[
                        {
                            path:'/setting/user',
                            component:User
                        },
                        {
                            path:'/setting/system',
                            component:System
                        }
                    ]
                }
            ]        
        })
        let app = new Vue({
            el:"#app",
            //3. 注册到根组件中
            components:{
                Home,
                Setting,
                User,
                System
            },
            //6. 注册到根组件中
            router:route
        })            
    </script>

4. 动态路由

同一个路由地址，根据传递的不同参数，显示不同的内容，如：商品详情页，多个商品共用一个页面（带有动态参数）

定义路由规则时，将动态参数使用 :变量进行参数绑定

<div id="app">
        <!-- 4. 定义router-link、router-view -->
        <div>
            <router-link to='/detail/1'>手机1</router-link>
            <router-link to='/detail/2'>手机2</router-link>
            <router-view></router-view>
        </div>        
    </div>
    <!-- 2. 定义组件模板 -->
    <template id="detail">
        <div>
            <h3>商品详情页</h3>
            <p>商品id是：{{this.$route.params.id}}</p>
        </div>
    </template>
    <script type="text/javascript">
        //1. 定义组件对象
        let Detail = {template:'#detail'}
        //5. 定义路由规则
        let route = new VueRouter({
            routes:[
                {
                    //说明：该处为动态参数，通过this.$route.params.id获取
                    path:'/detail/:id',
                    component:Detail
                }
            ]        
        })
        let app = new Vue({
            el:"#app",
            //3. 注册到根组件中
            components:{
                Detail
            },
            //6. 注册到根组件中
            router:route
        })            
    </script>

5. 编程式路由

编程式路由，通过js代码实现页面跳转，类似 js 代码 window.location 实现页面跳转

<div id="app">
        <div>
            <button @click="show">查看手机2商品详情</button><br>
            <router-link to='/detail/1'>手机1</router-link>
            <router-link to='/detail/2'>手机2</router-link>
            <router-view></router-view>
        </div>        
    </div>
    <template id="detail">
        <div>
            <h3>商品详情页</h3>
            <p>商品id是：{{this.$route.params.id}}</p>
        </div>
    </template>
    <script type="text/javascript">
        let Detail = {template:'#detail'}
        let route = new VueRouter({
            routes:[
                {
                    path:'/detail/:id',
                    component:Detail
                }
            ]        
        })
        let app = new Vue({
            el:"#app",
            components:{
                Detail
            },
            router:route,
            methods:{
                show(){
                    this.$router.push({path:'/detail/2'})
                }
            }
        })            
    </script>

6. 路由重定向

重定向，当访问一个路由地址时，自动跳转至其他的路由地址

例：当打开路由页面时，不显示任何内容（默认无匹配的路由规则）

例子代码

修改代码（在routes中添加红色部分的内容）

　　　　　　routes:[
                {
                    path:'/home',
                    component:Home
                },
                {
                    path:'/',
                    redirect:'/home',
                    component:Home
                },
                {……}
            ]

直接打开当前页面时，自动跳转到/home页面（重定向）