Vue.js 相关知识(路由)

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

新老客户大回馈,云服务器低至5折

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页面(重定向)

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:使用box-shadow进行画图(性能优化终结者)

下一篇:详解vue的diff算法