单页面控制中心 vue-router

最新推荐文章于 2024-09-23 18:07:56 发布

smiledawen

最新推荐文章于 2024-09-23 18:07:56 发布

阅读量561

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/smiledawen/article/details/131162238

版权

本文介绍了Vue.js中的路由基本配置，包括在router-index.js中设置懒加载路由，在App.vue中引入router-view。还详细讲解了路由的跳转方法，如通过router-link和编程式导航（this.$router.push）。此外，讨论了动态路由的配置和参数传递，以及嵌套路由的尝试。最后提到了导航守卫的使用，即在路由切换时执行的全局前置守卫。

摘要由CSDN通过智能技术生成

一、路由的基本配置

1. 在router->index.js中，配置一个懒路由，定义页面加载哪个组件

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  
]

// 配置一个懒路由,不然会加载页面下所有组件
const router = new VueRouter({
  routes:[
    {
      path:'/home',
      component:() => import('../views/Home.vue'),
    }
  ]
})

export default router

2. 在App.vue中，通过router-view组件，引入这个router

<template>
  <div id="app">
    this is app
    <!-- 显示定义的路由组件 -->
    <router-view></router-view>
  </div> 
</template>
 
<style>
</style> 

<script>
  import MParent from './views/Parent.vue'
  import bus from './util/bus'
import { RouterView } from 'vue-router';
  export default{
    data() {
    },
    components: {
    MParent,
    RouterView
},
    methods: {
    },
  }
</script>

注意，代码补全功能可以下载插件Auto Close Tag

二、路由的跳转

1. App.vue通过router-link跳转

<template>
  <div id="app">
    this is app
    <router-link to="/home">home</router-link>

    <!-- 显示定义的路由组件 -->
    <router-view></router-view>
  </div> 
</template>
 
<style>
</style> 

<script>
  import MParent from './views/Parent.vue'
  import bus from './util/bus'
import { RouterView } from 'vue-router';
  export default{
    data() {
    },
    components: {
    MParent,
    RouterView
},
    methods: {
    },
  }
</script>

2. App.vue通过编程式导航

App.vue中，不是通过router-link，而是通过button绑定this.$router函数

<template>
  <div id="app">
    this is app
    <!-- 写一个按钮，跳转到home -->
    <button @click="toHome">home</button>

    <!-- 显示定义的路由组件 -->
    <router-view></router-view>
  </div> 
</template>
 
<style>
</style> 

<script>
  import MParent from './views/Parent.vue'
  import bus from './util/bus'
import { RouterView } from 'vue-router';
  export default{
    data() {
    },
    components: {
    MParent,
    RouterView
},
    methods: {
      // this.$router跳转，编程式跳转
      toHome(){
        this.$router.push({ path: '/home'})
      }
    },
  }
</script>

编程式导航传参：注意，此时router配置时，不能用动态路由

<template>
  <div id="app">
    this is app
    <!-- 写一个按钮，跳转到home -->
    <button @click="toHome">home</button>

    <!-- 显示定义的路由组件 -->
    <router-view></router-view>
  </div> 
</template>
 
<style>
</style> 

<script>
  import MParent from './views/Parent.vue'
  import bus from './util/bus'
import { RouterView } from 'vue-router';
  export default{
    data() {
    },
    components: {
    MParent,
    RouterView
},
    methods: {
      // this.$router跳转，通过query传参，注意在index配置时，home后面不能是动态的：id这种
      toHome(){
        this.$router.push({ path: '/home',  query:{name:'Jack'}})
      }
    },
  }
</script>

三、动态路由

基础搭建：

index.js:：在path后使用冒号标记url参数

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  
]

// 配置一个懒路由,不然会加载页面下所有组件
// 动态路由，在home路径后面加个id，路径必须有id值，才能正确跳转，如：http://localhost:3333/#/home/1
const router = new VueRouter({
  routes:[
    {
      path:'/home/:id',
      component:() => import('../views/Home.vue'),
    }
  ]
})

export default router

Home.vue : 在页面中，可以通过params获得参数内容

<template>
    <div style="background-color: aquamarine;">
        this is home
        <h1>{{ $route.params.id }}</h1>
    </div>
</template>

<script>
    export default {
        
    }
</script>

<style lang="scss" scoped>

</style>

动态路由传参

App.vue中，toHome()跳转时指定name和params参数，注意name要和params搭配！！！！params是路径参数，内容是放在路径/后面的。之前的跳转，path和query搭配，query是变量，内容是放在路径？后面的

<template>
  <div id="app">
    this is app
    <!-- 写一个按钮，跳转到home -->
    <button @click="toHome">home</button>

    <!-- 显示定义的路由组件 -->
    <router-view></router-view>
  </div> 
</template>
 
<style>
</style> 

<script>
  import MParent from './views/Parent.vue'
  import bus from './util/bus'
import { RouterView } from 'vue-router';
  export default{
    data() {
    },
    components: {
    MParent,
    RouterView
},
    methods: {
      // 动态路由传参,push中参数名为name和id,
      // 注意： name 和 params 搭配！！！
      toHome(){
        this.$router.push({ name: 'home',  params:{id:'18'}})
      }
    },
  }
</script>

在router中的index.js中，编辑路由，增加 name。

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  
]

const router = new VueRouter({
  routes:[
    {
      path:'/home/:id',
      // 动态路由传参，根据name指定，需要多配置一个name
      name:'home',
      component:() => import('../views/Home.vue')
    }
  ]
})

export default router

四、嵌套路由（没整成功）不知道问题在哪儿

index.js 增加children

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  
]

const router = new VueRouter({
  routes:[
    {
      path:'/home/:id',
      // 动态路由传参，根据name指定，需要多配置一个name
      name:'home',
      component:() => import('../views/Home.vue'),
      Children:[{
        path:'/child',
        component:() => import('../views/Child.vue')
      }]
    }
  ]
})

export default router

home.vue，增加router-view

<template>
    <div style="background-color: aquamarine;">
        this is home
        <router-view></router-view>
    </div>
</template>

<script>
    export default {
        
    }
</script>

<style lang="scss" scoped>

</style>

五、导航守卫

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// import 'element-ui/lib/theme-chalk/index.css';

Vue.config.productionTip = false

//导航守卫，每次切换路由时触发
router.beforeEach((to, from, next)=>{
  console.log(to.path)
  next()
})

// Vue.use(ElementUI);
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')