欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Vue.js 相关知识(路由)

程序员文章站 2022-09-26 19:58:34
1. 简介 路由,工作原理与路由器相似(路由器将网线总线的IP分发到每一台设备上),Vue中的路由根据用户在网页中的点击,将其引导到对应的页面。 2. 使用步骤 安装vue-router或者直接引入vue-router.js(下载地址:https://router.vuejs.org/) 例:SPA ......

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. 路由重定向

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

例:当打开路由页面时,不显示任何内容(默认无匹配的路由规则)

例子代码

Vue.js 相关知识(路由)

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

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

直接打开当前页面时,自动跳转到/home页面(重定向)

Vue.js 相关知识(路由)