vue-router的使用

最新推荐文章于 2024-12-03 07:15:00 发布

原创最新推荐文章于 2024-12-03 07:15:00 发布 · 128 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue-router路由配置

vue基础专栏收录该内容

13 篇文章

订阅专栏

本文详细介绍Vue Router的配置与使用，包括路由配置、Hash与History模式切换及路由链接的基本用法。通过实例展示如何创建路由对象，设置路由规则，并在组件中使用<router-view>和<router-link>实现页面跳转。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue-router的使用

1.1 路由配置

在这里插入图片描述
完整的代码的展示：
main.js

import Vue from 'vue'
import App from './App'
// 步骤一：引入vue-router
import VueRouter from 'vue-router'
// 引入子组件HelloWorld.vue
import HelloWorld from './components/HelloWorld'
Vue.config.productionTip = false
// 步骤二：安装router插件
Vue.use(VueRouter)
// 步骤三：创建路由对象和路由规则
const router = new VueRouter({
  routes:
    [
      {
        path: '/',
        component: HelloWorld
      }

    ]
})

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  // 步骤四：将路由对象传递给vue实例中，在传递给其他的子组件
  template: '<App/>'

})

在子组件中：此处是App.vue

<template>
  <div id="app">
    <!-- 步骤五：在子组件中引入<router-view></router-view> -->
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

2.1 Hash 模式和 history模式的切换

vue-router 默认是Hash 模式域名带#号
在这里插入图片描述
通过设置 mode: ‘history’ 来成功切换为History模式

import Vue from 'vue'
import App from './App'
// 步骤一：引入vue-router
import VueRouter from 'vue-router'
// 引入子组件HelloWorld.vue
import HelloWorld from './components/HelloWorld'
Vue.config.productionTip = false
// 步骤二：安装router插件
Vue.use(VueRouter)
// 步骤三：创建路由对象和路由规则
const router = new VueRouter({
  routes:
    [
      {
        path: '/',
        component: HelloWorld
      }

    ],
  mode: 'history'// 切换为history模式
})

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  // 步骤四：将路由对象传递给vue实例中，在传递给其他的子组件
  template: '<App/>'

})

结果展示：
在这里插入图片描述

3. 的使用

基本用法：

<router-link :to="{name:xxx,params:{key:value}}">跳转</router-link>

代码展示：
main.js

import Vue from 'vue'
import App from './App'
// 步骤一：引入vue-router
import VueRouter from 'vue-router'
// 引入子组件HelloWorld.vue
import HelloWorld from './components/HelloWorld'
// 引入子组件Children
import Children from './components/Children'
Vue.config.productionTip = false
// 步骤二：安装router插件
Vue.use(VueRouter)
// 步骤三：创建路由对象和路由规则
const router = new VueRouter({
  routes:
    [
      {
        path: '/',
        name: 'HelloWorld',
        component: HelloWorld
      }, {
        // 注册Children组件进入路由对象中
        path: '/children',
        name: 'Children',
        component: Children
      }

    ],
  mode: 'history'// 切换为history模式
})

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  // 步骤四：将路由对象传递给vue实例中，在传递给其他的子组件
  template: '<App/>'

})

HelloWorld.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <ul>
      <router-link :to="{name:'Children'}">调转到子组件</router-link>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'vue-router test'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

Children.vue

<template>
    <h1>children components</h1>
</template>

<script>
export default {
  name: 'Children',
  data () {
    return {

    }
  }
}
</script>