vuecli路由的使用

最新推荐文章于 2024-12-31 16:31:28 发布

原创最新推荐文章于 2024-12-31 16:31:28 发布 · 511 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

vue-cli 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了如何在Vue.js应用中配置和使用Vue Router进行路由管理，包括设置路由、重定向、嵌套路由以及使用`router-link`和`router.push`进行导航。同时，展示了如何利用`keep-alive`实现页面缓存。

router.js

/*
路由器对象模块
 */
import Vue from 'vue'
import VueRouter from 'vue-router'

import About from '../views/About.vue'
import Home from '../views/Home.vue'
import News from '../views/News.vue'
import Message from '../views/Message.vue'
import MessageDetail from '../views/MessageDetail.vue'

// 声明使用vue-router插件
/*
内部定义并注册了2个组件标签(router-link/router-view),
给组件对象添加了2个属性:
  1. $router: 路由器
  2. $route: 当前路由
 */
Vue.use(VueRouter)

export default new VueRouter ({
  // 注册应用中所有的路由
  routes: [
    {
      path: '/about',
      component: About
    },
    {
      path: '/home',
      component: Home,
      children: [
        {
          path: '/home/news',
          component: News
        },
        {
          path: 'message',
          component: Message,
          children: [
            {
              path:'detail/:id',
              component: MessageDetail
            }
          ]
        },
        {
          path: '',
          redirect: '/home/news'
        }
      ]
    },
    {
      path: '/',
      redirect: '/about'
    }
  ]
})

main.js

/*
入口JS
 */
import Vue from 'vue'
import App from './App.vue'
import router from './router'


/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: {App}, // 映射组件标签
  template: '<App/>', // 指定需要渲染到页面的模板
  router  // 注册路由器
})

生成路由连接：

 <router-link to="/about" class="list-group-item">About</router-link>
  <router-link to="/home" class="list-group-item">Home</router-link>

push查看路由：

this.$router.push(`/home/message/detail/${id}`)

replace查看路由：

this.$router.replace(`/home/message/detail/${id}`)

路由缓存：

<keep-alive>
    <router-view>
        <!-- 所有路径匹配到的视图组件都会被缓存！ -->
    </router-view>
</keep-alive>