前端
一点也不简单

Vue.js中的router基础(一级、二级、动态、传参、接参)

  1. vue 路由的mode(模式)有几种, 分别是什么?在那些环境下运行?
  • hash: 使用 URL hash 值来作路由。支持所有浏览器,包括不支持 HTML5 History Api 的浏览器。
  • history: 依赖 HTML5 History API 和服务器配置。【需要后端支持】
  • abstract: 支持所有 JavaScript 运行环境,如 Node.js 服务器端。如果发现没有浏览器的 API,路由会自动强制进入这个模式。

一级路由

1.路由的使用步骤(以一个简单SPA单页面应)

  1. 安装 vue-router yarn add vue-router -S
  2. 在src目录下创建一个router目录, 里面创建一个index.js文件 , 这个目录就是router的模块
  3. 在index.js中引入第三方的依赖包, 并注册路由
import Vue from 'vue'
import vueRouter from 'vue-router'
Vue.use(vueRouter)//这个一定不能忘

注意: import这个关键字要放在整个文件的上层

2.创建了一个router对象实例,并且创建路由表routes

//创建路由表
const routes = [
    {
      
    }
]
//创建router示例
const router=new vueRouter ({
  //路由表
  routes, // 必写的
  //路由的使用模式   #/home(hash)   /home(h5 history)
  mode: 'history',
  //进行路由模块划分
  modules: {}
})

3.index.js中导出router实例

export default router

4.入口文件main.js中引入路由实例 router , 然后在根实例中注册

import router from './router/index.js'
new Vue({
  router,//根实例中注册()
  render: h => h(App),
}).$mount('#app')

常见错误:

  1. router小写(在import router from ‘./router/index.js’这里我把router大写爆红)

5.在components中创建页面组件

1.先来两个文件夹

  • common放可以复用的组件
  • pages放页面组件

2.在pages下写页面组件

我创建了,Home,List,Detail,Shopcar,Reg,Login,User这些组件

书写规范,仿造Vue.cli3的写法,文件名首字母大写

<template>
    <div class="home-box">
        Home
    </div>
</template>

6.在index.js中引入components里的组件

import Vue from 'vue'
import vueRouter from 'vue-router'
import Home from '../components/pages/Home'
import List from '../components/pages/List'
import Detail from '../components/pages/Detail'
import Login from '../components/pages/Login'
import Register from '../components/pages/Register'
import User from '../components/pages/User'
import Shopcar from '../components/pages/Shopcar'
import Error from '../components/pages/Error'
import Yyb from '../components/pages/Yyb'
import Junge from '../components/pages/Junge'

7.配置index.js里的路由表

路由表将变成这样

const routes = [
    {
      path : '/home',
      component : Home
    },
    {
        path : '/list',
        component : List
    },
    {
        path : '/detail',
        component : Deatil
    },
    {
        path : '/shopcar',
        component : ShopCar
    },
    {
        path : '/reg',
        component : Reg
    },
    {
        path : '/login',
        component : Login 
    },
    {
        path : '/user',
        component : User
    }
]

8.调整APP.vue,将所有组件展示出去

<template>
  <div id="app">
    <h2>路由router</h2>
    <div class="container">
      <div class="row">
          <nav class="nav nav-tabs nav-stacked">
            <router-link class="nav-link" to = "/home"> Home </router-link>
            <router-link class="nav-link" to = "/list"> list </router-link>
            <router-link class="nav-link" to = "/detail"> detail </router-link>
            <router-link class="nav-link" to = "/shopcar"> shopcar </router-link>
            <router-link class="nav-link" to = "/login"> login </router-link>
            <router-link class="nav-link" to = "/user"> user </router-link>
          </nav>
      </div>
      <div class="row">
          <!-- 路由的展示区域 -->
          <router-view></router-view> 
      </div>
    </div>
    
  </div>
</template>

<script>
/*
1.上面的router-link原本是a标签的,但是因为index.js里是history模式,
所以用了router-link,用了router-link,a标签的href就变成了to
2.hash的话就用a,用a的href
*/
export default {
  name: 'app',
  components: {
   
  }
}
</script>
<style lang="stylus">
</style>

到了这里启动服务页面可以打开,也可以正常展示,但是有两个路由的缺陷

  • ①页面一打开域名后是没有/home的所以路由展示区域没有东西
  • ②如果打开一个没有的router路由,那么路由展示区域啥也没有,不知道发生乐啥

9.解决前面路由的缺陷(页面打开重定向首页,404页面)

解决的方法很简单,就是重定向
//创建路由表
const routes = [
    //一定要放在第一个,表示第一次匹配
    {
        path : '/',
        component : Home
    },
    {
      path : '/home',
      component : Home
    },
    {
        path : '/list',
        component : List
    },
    {
        path : '/detail',
        component : Deatil
    },
    {
        path : '/shopcar',
        component : ShopCar
    },
    {
        path : '/reg',
        component : Reg
    },
    {
        path : '/login',
        component : Login 
    },
    {
        path : '/user',
        component : User
    },
    //一定要放在最后一个,因为路由匹配是按顺序匹配的,只有当匹配了所有的都找不到才说明是不存在的页面
    {
        path : '**',
        component : Error
    }
]

两点注意事项

  • 页面打开重定向到Home路由需要放在路由表顶部
  • 页面404提示需要放在路由表尾部

知识点:

vue路由模式的确定 mode

针对index.js中路由示例里的mode

const router=new vueRouter ({
  //路由表
  routes, // 必写的
  //路由的使用模式   #/home(hash)   /home(h5 history)
  mode: 'history',
  //进行路由模块划分
  modules: {}
})

看这个mode,有几个知识点

  1. 如果模式是hash,那么域名后缀里有个#home
  2. 如果是hash,呢么App.vue里的导航栏就用a标签就可以了

二级路由

二级路由我们由上面一级路由延伸来

来个场景:我们来List路由下增加两个二级路由

1.需要在index.js中的路由表routes下的这一块里面加上这些

{
        path : '/list',
        component : List,
        children : [
            {
                path : 'hqg',//注意:二级路由不需要/
                component : Hqg,
            }
        ]
    },

这里设置好了,还要在compontes里的pages里新建一个Hqg的组件,然后index.js顶部引入Hqg组件

//Hqg组件
<template>
    <div class="home-box">
       Hqg
    </div>
</template>
//又一个二级路由组件,上下不是一个文件
<template>
    <div class="home-box">
      我是个二级路由
    </div>
</template>

index.js顶部引入二级路由

import Hqg from '../components/pages/Hqg.vue'//二级路由
import Erji from '../components/pages/Erji.vue'//再来一个二级路由

2.上面完成了后我们需要在对应的一级路由里加上展示区域

我们用的是一级路由list所以我们在List.vue里加展示区域( <router-view> )

改造后称为这样

<template>
    <div class="list-box">
        List
        <router-link class="nav-link" to = "/list/hqg"> hqg </router-link>
        <router-link class="nav-link" to="/list/erji"> erji </router-link>
        <router-view></router-view>
    </div>
</template>

3.完成了这些,已经可以自由切换了,效果如下

Router路由展示

4.我们可以继续改造,有时候会出现5级路由啊,6级路由的

路由太长写起来太繁琐该怎么办呢?可以命名路由

命名路由只需要加个name属性,然后改造一下对应的一级路由里的展示区域

index.js里路由命名(只命名了第二个二级路由)

{
        path : '/list',
        component : List,
        children : [
            {
                path : 'hqg',//注意:二级路由不需要/
                component : Hqg,
            },
            {
                path : 'erji',//注意:二级路由不需要/
                component : Erji,
                name : 'hbb'
            }
        ]
    }

List.vue改造

<template>
    <div class="list-box">
        List
        <router-link class="nav-link" to = "/list/hqg"> hqg </router-link>
        <!-- <router-link class="nav-link" to="/list/erji"> erji </router-link> -->
        <router-link class="nav-link" :to="{name : 'hbb'}"> erji </router-link> 
        <router-view></router-view>
    </div>
</template>

注意事项:

  • 路由命名的写法有不同的,to前加了:
  • :to里的写法是”{name : ‘路由的名字’}”
赞(2) 打赏
未经允许不得转载:专注前端开发和vps技术交流的博客-纸飞机 » Vue.js中的router基础(一级、二级、动态、传参、接参)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

微信扫一扫打赏