路由的基本学习

最新推荐文章于 2024-07-21 15:24:36 发布

nancy081025

最新推荐文章于 2024-07-21 15:24:36 发布

阅读量356

点赞数

文章标签： vue.js html javascript

本文链接：https://blog.csdn.net/nancy081025/article/details/122208221

版权

本文深入探讨了Vue.js中的路由基础知识，包括路由的简介、基本使用方法、App.vue和index.js的配置、路由组件的管理，以及路由的query、params参数、命名路由、props配置、replace属性、编程式导航、缓存组件和路由组件的生命周期钩子。通过实例展示了路由在实际应用中的各种用法，如在News和Message组件间的切换效果。

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

路由

1.路由的简介

1.1 生活中的路由

1.2 编程中的路由

路由的基本使用

App.vue

<template>

  <div>

    <div class="row">

      <div class="col-xs-offset-2 col-xs-8">

        <div class="page-header"><h2>Vue Router Demo</h2></div>

      </div>

    </div>

    <div class="row">

      <div class="col-xs-2 col-xs-offset-2"> 

        <div class="list-group">

          <!-- <a class="list-group-item active" href="./about.html">About</a>

          <a class="list-group-item" href="./home.html">Home</a> -->

          <!--Vue中借助router-link标签实现路由的切换-->

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

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

        </div>

      </div>

      <div class="col-xs-6">

        <div class="panel">

          <div class="panel-body">

        <!--制定组件的呈现位置-->

           <router-view></router-view>

          </div>

        </div>

      </div>

    </div>

  </div>

</template>

<script>

  export default {

    name:'App', 

  }

</script>

注意：

<router-link class="list-group-item" active-class="active" to="/home.html">Home</router-link>//这边没有.html

index.js

//该文件专门用于创建整个应用的路由器

import VueRouter from 'vue-router';

//引入组件

import About from '../components/About'

import Home from '../components/Home'

//创建并且暴露一个路由器

export default new VueRouter({

    routes:[

        {

            path:'/about',

            component:About

        },

        {

            path:'/home',

            component:Home

        },

    ]

})

main.js

//引入Vue

import Vue from 'vue'

//引入App

import App from './App.vue'

//引入 vueRouter

import VueRouter from 'vue-router'

//引入路由器

import router from './router'

//关闭Vue的生产提示

Vue.config.productionTip = false

//使用插件

Vue.use(VueRouter)

//创建vm

new Vue({

    el:'#app',

    render: h => h(App),

    router:router

})