vue router的使用_vue路由的相关知识

时间: 2018-05-22阅读: 1860标签: router

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


原文来源:https://www.cnblogs.com/writerW/archive/2018/05/21/9069102.html 

 




站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/797

关闭

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!