路由的重定项

{
    path: '/',
    name: 'home',
    // 重定向到role,role是已经配置了的路由
    redirect:"/role",
    // 重定向还可以是一个函数
    // redirect:() => {
    //   return { path: '/role', query: { q: "123" } }
    // }
  },

别名

{
    path: '/',
    name: 'home',
    // 重定向到role
    redirect:"/role",
    // 别名  别名可以通过用数组使用多个别名
    // 将 / 别名为 /home，意味着当用户访问 /home 时，URL 仍然是 /home，但会被匹配为用户正在访问 /
    // 想要地址栏变成别名，前面就要使用别名跳转，这样他就显示的时别名(/home)，但实际上时访问的 /
    alias: ['/home','/name'],
  },

通配路径

通过正则匹配有相同点的路径

// 将匹配所有内容并将其放在 `$route.params.pathMatch` 下
//被匹配到的路径会被存放到pathMatch这个变量中，可以通过$route.params.pathMatch获取
  // { path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound },
  // 将匹配以 `/user-` 开头的所有内容，并将其放在 `$route.params.afterUser` 下
  // { path: '/user-:afterUser(.*)', component: UserGeneric },

动态传参

{
    // 动态传参
    // 传递的参数可以在对应的组件中通过this.$route.params
    // 使用动态传参是路径上必须有对应的数据，
    path: '/role/:id',
    name: 'role',
    component:()=> import(/* webpackChunkName: "content" */ "../views/RoleManage.vue")
  },

优点

1.没有硬编码的 URL
2.params 的自动编码/解码。
3. 防止你在 url 中出现打字错误
4. 绕过路径排序（如显示一个）

router-link和this.$route.push

链接命名路由通过to传递一个对象

这样通过动态路由传递数据时要通过params了
这和router.push({ name: ‘user’, params: { username: ‘erina’ } })是一样的

二级路由

// 以 / 开头的嵌套路径将被视为根路径。这允许你利用组件嵌套，而不必使用嵌套的 URL
// 1.路由配置页面，设置默认路由，然后你想在哪个页面写嵌套路由，就在这个路由中写子路由
// 2.子路由跳转及其展示，router-link，帮助我们操作要在router-view中展示的子路由页面

{
    path: '/userlist',
    name: 'userlist',
    component:()=> import(/* webpackChunkName: "content" */ "../views/UserList.vue"),
    // 二级路由要写到对应的路由配置项下面才行
      children:[
      // 当 /userlist/notfound 匹配成功
      // NotFound 将被渲染到 App.vue 的 <router-view> 内部
      // component引入组件
      { path: 'notfound', component:NotFound},
    ]
  },

对应二级路由的使用

<template>
  <div>
    用户列表
    // 二级路由要设置一个单独的router-view
    <router-view></router-view>
    <!-- 路径要包括二级路由的路径，即一级路由路径/二级路由路径 -->
    <router-link to='/userlist/notfound'>二级路由</router-link>
  </div>
</template>

声明式导航

<template>
  <div class="left-bar">
    <ul>
      <li>
        <span class="main-title">系统账号管理</span>
        <ul>
          <li>
            <!-- 声明式导航 -->
            <router-link class="router-link" to="/system/系统账号管理/平台账号管理">平台账号管理</router-link>
          </li>
          <li>
            <!-- 在路由表中是动态传参，那么在使用router-link时也要传递参数 -->
            <!-- 点击router-link时内部会调用this.$route.push -->
            <!-- 由于属性 to 与 router.push 接受的对象种类相同，所以两者的规则完全相同。 -->
            <router-link class="router-link" :to="{name:'role',params: { id: 1 }}">角色管理</router-link>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

页面跳转

push

特点

// 通过push跳转的页面会有历史记录的
// 只有一个路径作为参数时，直接传参，多个参数时使用对象传参
// this.$router.push(‘/users/eduardo’)

        // <!-- router.push 和所有其他导航方法都会返回一个 Promise，<br />            // 让我们可以等到导航完成后才知道是成功还是失败。 -->

传参

   // path与query一起使用，当path存在时params将会被忽略<br />      // this.$router.push({path:'/ok',query:{plan: 'private'}})
  // 通过反引号输入path<br />      const pat = '/ok';<br />      this.$router.push({path:`${pat}`,query:{plan: 'private'}})
  // name和params一起使用，通过命名路由跳转页面<br />      // this.$router.push({ name: 'user', params: { username: 'eduardo' } })
  // 传递的传参数可以是hash<br />      // this.$router.push({ path: '/about', hash: '#team' })

replace

  // 通过replace跳转的页面(没有历史记录)<br />      // 历史记录中（1，2，3）中的3被替换成4-->(1,2,4)<br />      // this.$router.replace()//作用和this.$router.push一样，（他把当前路径替换成replace中的路径）<br />      // 在历史记录中，也是将当前记录替换成replace中的<br />      // this.$router.replace({ path: '/ok' })

replace和push

  // router.push({ path: '/home', replace: true })<br />      // 相当于<br />      // router.replace({ path: '/home' })

go

  // 通过go横跨页面，（当然也可以使用forworld()向前，back（）向后）<br />      // this.$router.go(1)

获取传递的参数

<div>params:{{this.$route.params}}</div>
<div>query:{{this.$route.query}}</div>

代码

<template>
  <div class="left-bar">
    <ul>
      <li>
        <span class="main-title">系统账号管理</span>
        <ul>
          <li>
            <!-- 声明式导航 -->
            <router-link class="router-link" to="/system/系统账号管理/平台账号管理">平台账号管理</router-link>
          </li>
          <li>
            <!-- 在路由表中时动态传参，那么在使用router-link时就要传递参数 -->
            <!-- 点击router-link时内部会调用this.$route.push -->
            <!-- 由于属性 to 与 router.push 接受的对象种类相同，所以两者的规则完全相同。 -->
            <router-link class="router-link" :to="{name:'role',params: { id: 1 }}">角色管理</router-link>
          </li>
        </ul>
      </li>
      <li>
        <span class="main-title">用户管理</span>
        <ul>
          <li>
            <router-link class="router-link" to="/userreg">用户注册</router-link>
          </li>
          <li>
            <router-link class="router-link" to="/userlist">用户列表</router-link>
          </li>
          <li>
            <button class="btn" @click="toPage">跳转到404</button>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  methods:{
    toPage:function() {
      // 通过push跳转的页面会有历史记录的
      // 只有一个路径作为参数时，直接传参，多个参数时使用对象传参
      // this.$router.push('/users/eduardo')
            // <!-- router.push 和所有其他导航方法都会返回一个 Promise，
            // 让我们可以等到导航完成后才知道是成功还是失败。 -->
            // path与query一起使用，当path存在时params将会被忽略
      // this.$router.push({path:'/ok',query:{plan: 'private'}})
      // 通过反引号输入path
      const pat = '/ok';
      this.$router.push({path:`${pat}`,query:{plan: 'private'}})
      // name和params一起使用，通过命名路由跳转页面
      // this.$router.push({ name: 'user', params: { username: 'eduardo' } })
      // 传递的传参数可以是hash
      // this.$router.push({ path: '/about', hash: '#team' })
      // 通过replace跳转的页面(没有历史记录)
      // 历史记录中（1，2，3）中的3被替换成4-->(1,2,4)
      // this.$router.replace()//作用和this.$router.push一样，（他把当前路径替换成replace中的路径）
      // 在历史记录中，也是将当前记录替换成replace中的
      // this.$router.replace({ path: '/ok' })
      // router.push({ path: '/home', replace: true })
      // 相当于
      // router.replace({ path: '/home' })
      // 通过go横跨页面，（当然也可以使用forworld()向前，back（）向后）
      // this.$router.go(1)
    }
  }
}
</script>
<style>
ul,li{
  list-style: none;
  text-decoration: none;
  text-align: start;
  padding: 0;
  margin: 0;
  width: 100%;
}
.router-link {
  text-decoration: none;
  color: #333;
  height: 40px;
  background-color: rgb(247,248,248);
  display: block;
  line-height: 40px;
  font-size: 15px;
  font-weight: bold;
  padding-left: 30px;
}
.left-bar .main-title {
  height: 60px;
  display: block;
  line-height: 60px;
  font-size: 20px;
  font-weight: bold;
  padding-left: 15px;
}
</style>

首页布局代码

/ 让容器沾满全屏的高度 /
height: 100vh;
/ 让容器占满剩余位置 /
flex-grow: 1;

<template>
  <div id="app">
    <div class="leftBar">
      <LeftBar></LeftBar>
    </div>
    <div class="rightContent">
      <!-- 因只有一个页面，所以不论router-link和router-view写在哪里都是可以匹配的 -->
      <router-view></router-view>
    </div>
  </div>
</template>
<script>
import LeftBar from './components/LeftBar.vue'
export default{
  components:{
    LeftBar
  }
}
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  width: 100%;
  height: 100%;
  display: flex;
  /* 让容器沾满全屏 */
  height: 100vh;
}
nav {
  padding: 30px;
}
nav a {
  font-weight: bold;
  color: #2c3e50;
}
nav a.router-link-exact-active {
  color: #42b983;
}
.leftBar {
  width: 200px;
}
.rightContent {
  /* 让容器占满剩余位置 */
  flex-grow: 1;
  border-left: 1px solid #333;
}
</style>

vue 基础知识

vue11-router基本使用