当前位置:   article > 正文

vue-router的基本使用步骤(全)_yarn add vue-router -s

yarn add vue-router -s

vue-router的基本使用步骤(全)

  • vue 路由的mode(模式)有几种, 分别是什么?在那些环境下运行?
    • hash: 使用 URL hash 值来作路由。支持所有浏览器,包括不支持 HTML5 History Api 的浏览器。
    • history: 依赖 HTML5 History API 和服务器配置。【需要后端支持】
    • abstract: 支持所有 JavaScript 运行环境,如 Node.js 服务器端。如果发现没有浏览器的 API,路由会自动强制进入这个模式。
  1. 安装 vue-router       yarn add vue-router -S
  2. 在src目录下创建一个router目录, 里面创建一个index.js文件 , 这个目录就是router的模块
  3. 引入第三方的依赖包, 并注册路由
import Vue from 'vue'//引入vue
import VueRouter from 'vue-router'//引入vue-router路由模块
Vue.use( VueRouter ) //使用vue-router这个第三方插件
  • 1
  • 2
  • 3

注意: import这个关键字要放在整个js文件的上层,也就是只能紧贴着javascript标签下面写,js文件就写顶部
4. 创建了一个router对象实例,并且创建路由表

const routes = [//路由表
    {
        path: '/home',
        component: Home
        }//每一个对象就是一个路由
    ]
const router = new VueRouter({
    routes//路由表 必写的
    mode:''//有三个选项,默认是hash,还有history,abstract,上面有讲述
})
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  1. 导出router实例,使用export default导出,只能导出一个
    export default router
  2. 入口文件main.js中引入路由实例 router , 然后在根实例中注册
import router from './router/index.js'//引入这个router文件,默认会打开index.js,所以index.js可以省略不写
new Vue({
    router,//在这里使用一下router
    render: (h) => h(App)
}).$mount('#app')
  • 1
  • 2
  • 3
  • 4
  • 5
  1. 给路由一个路由展示区域
  • 如果是以及路由, 那么我们放在App组件中,用一个 router-view 的组件表示
<router-view></router-view>
  • 1
  1. 当页面第一次的打开的时候, 需要做一个重定向, 就是要自动跳转到 /home 这个路由上
const routes = [
    { //我们要求这个路由的配置要放在路由表的最上方
        path: '/',
        redirect: '/home'//redirect表示重定向,后面跟的是要去的路径
    }
]
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  1. 错误路由匹配,
const routes = [
    {
        path: '/',
        redirect: '/home' //重定向
    },
    {
        path: '/home',
        component: Home
    },
    {
        path: '/list',
        component: List
    },
    {
        path: '/detail',
        component: Detail
    },
    {
        path: '/login',
        component: Login
    },
    {
        path: '/register',
        component: Register
    },
    {
        path: '/user',
        component: User
    },
    {
        path: '/shopcar',
        component: Shopcar
    },
    {
        path: '/error',
        component: Error
    },
    { //这个就是错误路由匹配, vue规定这个必须放在最下面,它必须将上面的路由全找一遍,找不到才用当前这个
        path: '**',
        redirect: '/error'//如果路径出错,就跳到你写好的错误路由页面
    }
]
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  1. vue路由模式的确定 mode
  • 如果你使用的是 hash , 那么a标签就可以了、
  • 如果你使用 history , 那么我们最好将a标签改成 router-link 这个组件
  • router-link 这个组件 身上必须要有一个 to 属性
>bottostarp选项卡案例
<template>
    <div id="app">
        <div class="container">
            <div class="row">
                <nav class="nav nav-tabs nav-stacked">
                <router-link class="nav-link" to = "/user"> user </router-link><!--把a标签改成 router-link , href 改成 to,to的值等于你index.js中注册的路由叫什么,注意小写-->
                <router-link class="nav-link" to = "/shopcar"> shopcar </router-link>
                <router-link class="nav-link" to = "/list"> list </router-link>
                <router-link class="nav-link" to = "/Home"> Home </router-link>
                <router-link class="nav-link" to = "/login"> login </router-link>
                </nav>
            </div>
            <div class="row">
                <!-- 路由的展示区域 -->
                <router-view></router-view>
            </div>
        </div>
    </div>
</template>


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  1. 二级路由
const routes = [
    {
        path: '/shopcar',
        component: Shopcar,
        children: [
                {
                    path: 'yyb', //不写 /
                    component: Yyb
                }
            ]
    }
]
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 注意: 写好配置之后,不要忘记了, 在对应的一级路由的组件中书写 路由展示区域
  1. 命名路由

作用: 就是简写路径了

{
path: '/shopcar',
component: Shopcar,
//子路由
children: [
    {
        path: 'yyb', // 容易犯错点,二级路由不带  /  反斜杠
        component: Yyb,
        name: 'yyb' //命名路由
    },
    {
        path: 'junge',
        component: Junge
    }
]
},
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 使用:
<router-link :to = "{name:'yyb'}"/>//记得 to 前面要带 : 单向数据绑定,后面是一个对象name='你命名的路由名字'
  • 1

13.命名视图

给出了一级视图以外的其他视图起名字, 这样可以区分不同级别的路由使用不同级别的视图

//这是一个路由表中的一个路由
{
path: '/Home', //路径,路径不能大写,不推荐大写
component: Home,//组件,名称要和你引入时import的名字一样
children:[//二级路由
        {
            path:'zy',//切记 二级路由 的路径不能带反斜杠 /
            component:Zy
        },
        {
            path:'aa',
            component:{//命名视图就是把component写成一个对象的形式,键是视图名字,值是路由的名i在,就是上面引入进来的那个名字
                zhangyue:Aa
            },
            name:'aa'//命名路由,当路由有很多级时,书写太麻烦,就需要一个名字,写路径时,直接写这个名字就可以
        },
    ]
},

//使用就直接在标签里加上name就可以<router-view name = "zhangyue"></router-view>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20

在这里插入图片描述

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/盐析白兔/article/detail/616501
推荐阅读
相关标签
  

闽ICP备14008679号