Vue Router 学习及demo

最新推荐文章于 2023-06-05 11:06:43 发布

crazy_wsp

最新推荐文章于 2023-06-05 11:06:43 发布

阅读量357

点赞数

分类专栏： Vue 文章标签： vue router

本文链接：https://blog.csdn.net/qq_14994863/article/details/99933657

版权

Vue 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

Vue Router ：

router的api：

https://router.vuejs.org/zh/api/

路由管理器，功能有：

嵌套的路由/视图表
模块化的、基于组件的路由配置
路由参数、查询、通配符
基于 Vue.js 过渡系统的视图过渡效果
细粒度的导航控制
带有自动激活的 CSS class 的链接
HTML5 历史模式或 hash 模式，在 IE9 中自动降级
自定义的滚动条行为

子路由：

–js代码：注意：children路由中的path不需要添加‘/’

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

// 定义路由组件
const first = { template: '<div>This is first.</div>' }
const second = { template: '<div>This is second.</div>' }
const Home = { template: '<div>This is home.</div>' }

const firstChild = { template: '<div>firstChild内容</div>' }
const secondChild = { template: '<div>secondChild内容</div>' }

const childRouter = {
  template: `
    <div class="childRouter">
      <h2>组件</h2>
      <router-view></router-view>
    </div>
  `
}

//定义router实例，配置路由的路径及对应的组件
const router = new Router({
  mode: 'history',
  base: __dirname,
  //可以将routes分离出去单独定义为一个变量，引入进来即可
  routes: [
    { path: '/', component: Home },
    { path: '/first', component: childRouter,
      children:[
        { path: '/', component: first},
        { path: 'first', component: firstChild},
        { path: 'second', component: secondChild}
      ]
    },
    { path: '/second', component: second }
  ]
})

// 创建和挂载根实例
new Vue({
  router,
  template: `
    <div id="app">
      <h1>Named Routes</h1>
      <ol>
        <li><router-link to="/">/</router-link></li>
        <li><router-link to="/first">first</router-link></li>
          <ol>
            <li><router-link to="/first/first">firstChild</router-link></li>
            <li><router-link to="/first/second">secondChild</router-link></li>
          </ol>
        <li><router-link to="/second">bar</router-link></li>
      </ol>
      <router-view class="view"></router-view>
    </div>
  `
}).$mount('#app')

–html代码：

<body>
    <div id="app">
        <h1>Named Routes</h1>
        <router-view></router-view>
    </div>
  </body>

– 展示：

Named Routes
/
first
firstChild
secondChild
bar
组件
This is first.

路由中参数的传递:

通过$route.name获取路由的name参数
通过$route.params获取路由传递的参数

const firstChild = { template: '<div>firstChild内容</div>' }
const secondChild = { template: '<div>secondChild内容 {{ $route.params.id }}</div>' }

const childRouter = {
  template: `
    <div class="childRouter">
      <h2>组件</h2>
      <router-view></router-view>
    </div>
  `
}

//定义router实例，配置路由的路径及对应的组件
const router = new Router({
  mode: 'history',
  base: __dirname,
  //可以将routes分离出去单独定义为一个变量，引入进来即可
  routes: [
    { path: '/', name: 'Home', component: Home },
    { path: '/first', component: childRouter,
      children:[
        { path: '/', name: 'First', component: first},
        { path: 'first', name: 'First-Child', component: firstChild},
        { path: 'second', name: 'Second-Child', component: secondChild}
      ]
    },
    { path: '/second', name: 'Second', component: second }
  ]
})

// 创建和挂载根实例
new Vue({
  router,
  template: `
    <div id="app">
      <h1>Named Routes</h1>
      <p>{{ $route.name }}</p>
      <ol>
        <li><router-link to="/">/</router-link></li>
        <li><router-link to="/first">first</router-link></li>
          <ol>
            <li><router-link to="/first/first">firstChild</router-link></li>
            <li><router-link :to="{ name: 'Second-Child', params: { id: 123 }}">secondChild</router-link></li>
          </ol>
        <li><router-link to="/second">bar</router-link></li>
      </ol>
      <router-view class="view"></router-view>
    </div>
  `
}).$mount('#app')

路由表的组件群，同一个路由对应多个组件：

注意：

component需要用复数形式：components

// 定义路由组件
const first = { template: '<div>This is first.</div>' }
const Home = { template: '<div>This is home.</div>' }

const a = { template: '<div>This is a compenent.</div>' }
const b = { template: '<div>This is b compenent.</div>' }
const c = { template: '<div>This is c compenent.</div>' }

//定义router实例，配置路由的路径及对应的组件
const router = new Router({
  mode: 'history',
  base: __dirname,
  //可以将routes分离出去单独定义为一个变量，引入进来即可
  routes: [
    { path: '/', name: 'Home', component: Home },
    { path: '/first', name: 'First', components: {
      /* 注意components单词用复数形式 */
      /* 该路由路径对应了三个组件 */
      default: a,
      left: b,
      right: c
    }},
  ]
})

// 创建和挂载根实例
new Vue({
  router,
  template: `
    <div id="app">
      <h1>Named Routes</h1>
      <p>{{ $route.name }}</p>
      <ol>
        <li><router-link to="/">/</router-link></li>
        <li><router-link to="/first">first</router-link></li>
      </ol>

      /* 组件群放置的位置，默认组件和具有相应name属性的组件 */
      <router-view class="view"></router-view>
      <router-view class="view" name="left" style="height: 200px;float:left;width:25%; background-color: red;"></router-view>
      <router-view class="view" name="right"  style="height: 200px;float:left;width:25%; background-color: blue"></router-view>
    </div>
  `
}).$mount('#app')

路由传参：

const router = new Router({
  mode: 'history',
  base: __dirname,
  //可以将routes分离出去单独定义为一个变量，引入进来即可
  routes: [
    { path: '/' },
    /* 对应有两个参数：aaa,bbb的路由 */
    { path: '/params/:aaa/:bbb'},
    /* 使用正则表达式，对应id参数为数字的路由 */
    { path: '/params-regex/:id(\\d+)'}
  ]
})

// 创建和挂载根实例
new Vue({
  router,
  template: `
    <div id="app">
      <ul>
        <li><router-link to="/">/</router-link></li>
        <li><router-link to="/params/111/222">/params/111/222</router-link></li>
        <li><router-link to="/params-regex/111">/params-regex/111</router-link></li>
      </ul>
      <p>{{ $route.params.aaa }}</p>
      <p>{{ $route.params.bbb }}</p>
      <p>id: {{ $route.params.id }}</p>
      <pre>
        <code>
          {{ JSON.stringify($route, null, 2) }}
        </code>
      </pre>
    </div>
  `
}).$mount('#app')

query：

// 定义路由组件
const Home = {template: '<div><h2>Home</h2></div>'}
const users = {
  template: `
    <div>
      <h2>Users</h2>
      <router-view></router-view>
    </div>
  `
}
const user = {
  template: `
    <div>
       /* 输出query中的内容 */
      {{ $route.params.username }} -- {{ $route.query.key }}
    </div>
  `
}

//定义router实例，配置路由的路径及对应的组件
const router = new Router({
  mode: 'history',
  base: __dirname,
  //可以将routes分离出去单独定义为一个变量，引入进来即可
  routes: [
    { path: '/', naem: 'Home', component: Home },
    { path: '/users', component: users, 
        children: [
          /* 传递username参数 */
          {path: ':username', name: 'user', component: user}
        ]
    }
  ]
})

// 创建和挂载根实例
new Vue({
  router,
  template: `
    <div>
      <ol>
        <li><router-link to="/">/</router-link></li>
        <li><router-link to="/first">first</router-link></li>
          <ol>
            <li>
              <router-link :to="{path: '/users/wrewrew', query: {key: 'value'}}">
                query
              </router-link>
            </li>
          </ol>
      </ol>
      <router-view></router-view>
    </div>
  `
}).$mount('#app')

路由重定向：

// 定义路由组件
const sdfsf = {
  template: `
    <div>
      <h4>This is sdfsf.</h4>
      <router-view></router-view>
    </div>
  `
}

const first = { template: '<div>This is first.</div>' }

const second = { template: '<div>This is second.</div>' }
const Home = { template: '<div>This is home.</div>' }

const firstChild = { template: '<div>This is firstChild.</div>' }

const a = { template: '<div>This is a compenent.</div>' }
const b = { template: '<div>This is b compenent.</div>' }
const c = { template: '<div>This is c compenent.</div>' }

//定义router实例，配置路由的路径及对应的组件
const router = new Router({
  mode: 'history',
  base: __dirname,
  //可以将routes分离出去单独定义为一个变量，引入进来即可
  routes: [
    { path: '/', name: 'Home', component: Home },
    { path: '/first', name: 'First', component: sdfsf,
        children: [
          { path: '/', component: first },
          { path: 'firstChild', name: 'First-Child', component: firstChild},
          /* 将secondChild重定向到firstChild，通过如下两种方式均可 */
          /* { path: 'secondChild', redirect: { name: 'First-Child'}} */
          { path: 'secondChild', redirect: 'firstChild'}
        ]
    },
    { path: '/aaa/:id', component: second },
    { path: '/bbb/:id', redirect: '/aaa/:id' },

    /* 根据参数值，来设置重定向的路径 */
    {
      path: '/ccc/:id',
      redirect:xxxx => {
        const { hash, params, query } = xxxx;
        if(params.id == '001') {
          return '/'
        }else{
          return '/aaa/:id'
        }
      }
    }
  ]
})

// 创建和挂载根实例
new Vue({
  router,
  template: `
    <div id="app">
      <h1>Named Routes</h1>
      <p>{{ $route.name }}</p>
      <ol>
        <li><router-link to="/">/</router-link></li>
        <li><router-link to="/first">first</router-link></li>
          <ol>
            <li><router-link :to="{name: 'First-Child'}">firstChild</router-link></li>
            <li><router-link to="/first/secondChild">secondChild</router-link></li>
          </ol>
        <li><router-link to="/aaa/123">/aaa/123</router-link></li>
        <li><router-link to="/bbb/234">/bbb/234</router-link></li>

        <li><router-link to="/ccc/001">/ccc/234</router-link></li>
      </ol>

      <router-view class="view"></router-view>
    </div>
  `
}).$mount('#app')

别名：alias

{path: '/second', name 'Second', component: second, alias: '/gogo' }
<li><router-link to="/gogo">gogo</router-link></li>
通过访问上面的 '/gogo'路径即可访问'/second'路由。
--数组：同时为一个路由起多个别名
 { path: 'firstChild', name: 'First-Child', component: firstChild, alias: ['/gogo', '/haha'] },

路由的过渡动画：

<transition name="fade" mode="out-in">
	<router-view></router-view>
</transition>

--css：
.fade-enter-active, .fade-leave-active {
	transition: opacity 0.5s
}
.fade-enter, .fade-leave-active {
	opacity: 0
}

监控动画，watch：

new Vue({
    router,
    data() {
      return {
          nameVal: 'fade1'
      }
    },
    template: `
        <div>
            <h3>{{ $route.name }}</h3>
            <ul>    
                <li><router-link to="/">/</router-link></li>
                <li><router-link to="/parent">parent</router-link></li>
            </ul>
            <transition name="fade" mode="out-in">
                <router-view></router-view>
            </transition>
        </div>
    `,
    watch: {
      '$route'(to, from){
        if (from.path == '/parent') {
            this.nameVal = 'fade1'
        } else {
            this.nameVal = 'fade2'
        }
      }
    }
}).$mount('#app')

--class代码：
 .fade1-enter-active, .fade-leave-active {
 	transition: opacity 0.5s
 }
 .fade1-enter, .fade-leave-active {
 	opacity: 0
 }
 .fade2-enter-active, .fade-leave-active {
 	transition: opacity 0.5s
 }
 .fade2-enter, .fade-leave-active {
 	opacity: 0;
 	background-color: red;
 	color: blue;
 }

定义404路由，当路由不存在时的显示页面：

--定义404路由：
const Page404 = {
  template: `
      <div>
          <h1>This is 404.</h1>
      </div>
  `
}

--将'/*'路径与404路由对应：
const router = new Router({
    mode: 'history',
    base: __dirname,
    routes: [
        { path: '/', component: Home },
        { path: '/parent', component: parent},
        /* 404的路径一定要放在最后面 */
        { path: '/*', component: Page404},
    ]
})

--例子：未定义的路由
<li><router-link to="/fadsfasdf">where is page</router-link></li>

利用路由引入vue组件：

--根据文件路径来引入：
import Parent from '../components/transition.vue'

--在路由中定义：
const router = new Router({
    mode: 'history',
    base: __dirname,
    routes: [
        { path: '/', component: Home },
        { path: '/xxx', component: Parent},
    ]
})

创建实例：当点击 'where is page'链接时，即显示引入的vue组件模板
<li><router-link to="/xxx">where is page</router-link></li>

配置路径：@代替’src’

-- 如下：将src路径配置为'@'，将components路径配置为'cmp'
resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      "cmp":resolve('src/components')
    }
  },
  
--使用components路径：
{ path: '/', component: ()=>import('cmp/HelloWorld') }
等价于：
{ path: '/', component: ()=>import('../components/HelloWorld') }

路由守卫：

全局前置守卫：next()方法必须调用，不然无法跳转；next(false)或不定义，路由不会跳转

router.beforeEach((to, from, next) => {
    /* to:即将要进入的目标 路由对象 */
    /* from: 当前导航正要离开的路由 */
    console.log(to)
    console.log(from)
    next()
})

全局后置守卫：没有next函数

router.afterEach((to, from) => {
  // ...
})

路由独享前置守卫：

const router = new Router({
    routes: [
        { path: '/', component: ()=>import('cmp/HelloWorld') },
        { path: '/parent', component: parent,
            beforeEnter: (to, from, next) => {
                // next('/parent1')  --等同于下面代码：点击'/parent'会跳转到'/parent1'路由
                next({ path: 'parent1' })
            }
        }
    ]
})

组件内守卫：

参考官网：https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E7%BB%84%E4%BB%B6%E5%86%85%E7%9A%84%E5%AE%88%E5%8D%AB

编程式导航：前进后退首页query按钮

<template>
  <div>
    <button v-on:click="back">后退</button>
    <button v-on:click="forward">前进</button>
    <button v-on:click="home">返回首页</button>
    <button v-on:click="query">query</button>
    <ul>
      <li>
        <router-link to="/">/</router-link>
      </li>
      <li>
        <router-link to="/parent">parent</router-link>
      </li>
      <li>
        <router-link to="/parent1">parent1</router-link>
      </li>
    </ul>
    <p>a - {{ $route.query.a }}, b - {{ $route.query.b }}</p>
    <router-view />
  </div>
</template>
<script>
export default {
    methods:  {
      back() {
          this.$router.go(-1)
      },
      forward() {
          this.$router.go(1)
      },
      home() {
          this.$router.push('/')
      },
      query() {
          this.$router.push({ path: '/', query: { a: 1, b: 2 }})
      }
    }
}
</script>

crazy_wsp

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue Router 学习及demo

Vue Router ：router的api：https://router.vuejs.org/zh/api/路由管理器，功能有：嵌套的路由/视图表模块化的、基于组件的路由配置路由参数、查询、通配符基于 Vue.js 过渡系统的视图过渡效果细粒度的导航控制带有自动激活的 CSS class 的链接HTML5 历史模式或 hash 模式，在 IE9 中自动降级自定义的滚动条行...
复制链接

扫一扫