• vue学习-12路由组件的基本使用

    路由的基本使用

    vue的路由是vue,js官方的路由管理器，其主要用于构建单页应用程序，允许你通过定义路由来管理不同页面之间的导航。

    1.引入路由

    在使用vue的路由之前，一般我们在创建vue项目的时候，是可以选择添加路由的，只要你选择了yes，那么他就会给你自动安装，如果你没有选择，那么我们仍然可以手动引入vue Router,可以使用npm或者yarn进行安装，这就各凭所好了。

    npm install vue-router
# 或者
yarn add vue-router

    • 1
    • 2
    • 3

    之后，我们在vue的应用的入口文件，通常一般是main.js中，导入Vue和Vue Router，并配置他

    import Vue from 'vue';
import VueRouter from 'vue-router'; //引入vue路由

Vue.use(VueRouter); //使用路由

const router = new VueRouter({
  routes: [
    // 在这里定义你的路由配置
  ]
});

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    2.定义路由

    在上面的代码中，我们创建了一个router示例，并通过routes选项来定义路由，每个路由都是一个javaScript对象，包含路径（path）和关联的组件(component)。
    例如：

    const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
  // 其他路由定义
];

    • 1
    • 2
    • 3
    • 4
    • 5

    3.创建路由视图

    在vue组件中，可以使用标签来显示匹配当前路径的组件，这个标签会在页面中渲染出对应的组件。

    <template>
  <div>
    <router-view>router-view>
  div>
template>

    • 1
    • 2
    • 3
    • 4
    • 5

    4.导航

    可以在应用中通过编程式导航或者通过标签进行导航。

    函数式导航

    使用$router对象进行编程式导航，例如

    // 在某个方法中导航到/about路径
this.$router.push('/about');

    • 1
    • 2

    标签

    标签是一个用于导航的链接，他会自动处理路径和导航的逻辑。

    <router-link to="/about">Aboutrouter-link>

    • 1

    5.嵌套路由

    Vue Router支持嵌套路由，允许你在一个路由内部嵌套另一个路由。这通常用于创建复杂的页面结构。

    const routes = [
  {
    path: '/user',
    component: User,
    children: [
      { path: '', component: UserProfile },
      { path: 'profile', component: UserProfile },
      { path: 'posts', component: UserPosts }
    ]
  }
];

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    DEMO

    目录结构：
    在这里插入图片描述

    main.js

    
//引入Vue组件
import Vue from 'vue';

//引入App组件
import App from './App.vue';

//关闭Vue生产提示信息
Vue.config.productionTip=false;

//引入vue-router插件
import VueRouter from 'vue-router';

//使用VueRouter插件
Vue.use(VueRouter);

//引入路由器
import Router from './router/index';

//创建Vue实例对象nm
const vm = new Vue({
    el:'#app',
    router:Router,
    render(h) {
        return h(App);
    }
});
console.log(vm);

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28

    App.vue

    
<template>
    <div>
        <div class="row">
            <Banner>Banner>
        div>
        <div class="row">
            <div class="col-xs-2 col-xs-offset-2">
                <div class="list-group">
                    
                    
                    

                    
                    <router-link class="list-group-item" active-class="active" to="/about">Aboutrouter-link>
                    <router-link class="list-group-item" active-class="active" to="/home">Homerouter-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>
    import Banner from './components/Banner.vue';

    export default {
        name:'App',
        components:{
            Banner
        }
    }
script>

<style>
    
style>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44

    index.js

    
//该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router';

//引入组件
import About from '../pages/About.vue';
import Home from '../pages/Home.vue';

//创建并暴露一个路由器
export default new VueRouter({
    //一组路由
    routes:[
        {
            path:"/about",
            component:About
        },
        {
            path:"/home",//路由的路径
            component:Home//要跳转的组件
        }
    ]
});

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22

    About.vue

    <template>
    <h2>我是About的内容h2>
template>

<script>
    export default {
        name: 'About',
        beforeDestroy(){
            console.log("About组件将被销毁");
        },
        mounted(){
            console.log("About组件挂载完毕",this);
            window.aboutRoute=this.$route;
            window.aboutRouter=this.$router;
        }
    }
script>

<style>

style>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21

    Home.vue

    <template>
    <h2>我是Home的内容h2>
template>

<script>
    export default {
        name: 'Home',
        beforeDestroy(){
            console.log("Home组件将被销毁");
        },
        mounted(){
            console.log("Home组件挂载完毕",this);
            window.homeRoute=this.$route;
            window.homeRouter=this.$router;
        }
    }
script>

<style>

style>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21

    Banner.vue

    <template>
    <div class="col-xs-offset-2 col-xs-8">
        <div class="page-header"><h2>Vue Router Demoh2>div>
    div>
template>

<script>
    export default {
        name:'Banner'
    }
script>

<style>

style>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    vue多级路由

    多级路由在Vue.js中是一种组织和管理页面的方式，通常用于构建复杂的单页面应用（SPA）。Vue Router是Vue.js官方提供的路由管理器，用于实现多级路由。

    在Vue Router中，你可以使用嵌套路由来创建多级路由结构。以下是一个简单的示例：

    // 在路由配置中定义多级路由
const routes = [
  {
    path: '/',
    component: Home,
    children: [  //配置子路由，也就是路由的嵌套
      {
        path: 'about',
        component: About
      },
      {
        path: 'contact',
        component: Contact
      }
    ]
  }
]

// 创建Vue Router实例并将路由配置传递给它
const router = new VueRouter({
  routes
})

// 在Vue实例中使用路由
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29

    在上面的示例中，我们定义了一个多级路由结构，包括主页（Home）以及它的子页面（About和Contact）。通过这种方式，你可以在一个页面中嵌套显示不同级别的内容，而不需要每个页面都创建一个独立的Vue组件。

    你可以使用来在模板中渲染路由组件，例如：

    <template>
  <div>
    <h1>My Apph1>
    <router-view>router-view>
  div>
template>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    根据路由的不同，会渲染相应的子组件。

    多级路由Demo

    在这里插入图片描述
    main.js

    //引入Vue组件
import Vue from 'vue';

//引入App组件
import App from './App.vue';

//关闭Vue生产提示信息
Vue.config.productionTip=false;

//引入vue-router插件
import VueRouter from 'vue-router';

//使用VueRouter插件
Vue.use(VueRouter);

//引入路由器
import Router from './router/index';

//创建Vue实例对象nm
const vm = new Vue({
    el:'#app',
    router:Router,
    render(h) {
        return h(App);
    }
});
console.log(vm);

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27

    index.js

    //该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router';

//引入组件
import About from '../pages/About.vue';
import Home from '../pages/Home.vue';
import News from '../pages/News.vue';
import Message from '../pages/Message.vue';

//创建并暴露一个路由器
export default new VueRouter({
    //一组路由
    routes:[
        {
            path:"/about",
            component:About,
            children:[//配置子路由(也就是路由的嵌套)
                {
                    path:'news',
                    component:News
                },
                {
                    path:'message',
                    component:Message
                }
            ]
        },
        {
            path:"/home",//路由的路径
            component:Home,//要跳转的组件
            children:[//配置子路由(也就是路由的嵌套)
                {
                    path:'news',
                    component:News
                },
                {
                    path:'message',
                    component:Message
                }
            ]
        }
    ]
});

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43

    App.vue

    <template>
    <div>
        <div class="row">
            <Banner>Banner>
        div>
        <div class="row">
            <div class="col-xs-2 col-xs-offset-2">
                <div class="list-group">
                    
                    
                    

                    
                    <router-link class="list-group-item" active-class="active" to="/about">Aboutrouter-link>
                    <router-link class="list-group-item" active-class="active" to="/home">Homerouter-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>
    import Banner from './components/Banner.vue';

    export default {
        name:'App',
        components:{
            Banner
        }
    }
script>

<style>
    
style>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43

    Banner.vue

    <template>
    <div class="col-xs-offset-2 col-xs-8">
        <div class="page-header"><h2>Vue Router Demoh2>div>
    div>
template>

<script>
    export default {
        name:'Banner'
    }
script>

<style>

style>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    About.vue

    <template>
    <div>
        <h2>About组件内容h2>
        <div>
            <ul class="nav nav-tabs">
                <li>
                    <router-link class="list-group-item" active-class="active" to="/about/news">Newsrouter-link>
                li>
                <li>
                    <router-link class="list-group-item" active-class="active" to="/about/message">Messagerouter-link>
                li>
            ul>
           <router-view>router-view>
        div>
    div>
template>

<script>
    export default {
        name: 'About'
    }
script>

<style>

style>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26

    home.vue

    <template>
    <div>
        <h2>Home组件内容h2>
        <div>
            <ul class="nav nav-tabs">
                <li>
                    <router-link class="list-group-item" active-class="active" to="/home/news">Newsrouter-link>
                li>
                <li>
                    <router-link class="list-group-item" active-class="active" to="/home/message">Messagerouter-link>
                li>
            ul>
            
            <router-view>router-view>
        div>
    div>
template>

<script>
    export default {
        name: 'Home'
    }
script>

<style>

style>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27

    Message.vue

    <template>
    <div>
        <ul>
            <li>
                <a href="/message1">message001a>  
            li>
            <li>
                <a href="/message2">message002a>  
            li>
            <li>
                <a href="/message3">message003a>  
            li>
        ul>
    div>
template>

<script>
    export default {
        name:'Message'
    }
script>

<style>

style>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25

    News.vue

    <template>
    <ul>
        <li>news001li>
        <li>news002li>
        <li>news003li>
    ul>
template>

<script>
    export default {
        name:'News'
    }
script>

<style>

style>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
  • 相关阅读:
    SpringBoot网课管理系统的设计与实现源码
    hadoop运行WordCount时，Input path does not exist错误原因
    Canvas绘图学习笔记：画笔的路径与状态
    蚂蚁集团数字科技六大新品发布，以数助实赋能产业数字化
    [office] Excel设置打印表头 #学习方法#学习方法#微信
    大前端进阶：Git
    vue基础知识和原理（二）
    Oracle导入出现问题
    webuploader文件上传 拖拽上传 进度监听 类型控制 上传结果监听控件
    知识点9--容器的数据卷
  • 原文地址：https://blog.csdn.net/qq_45922256/article/details/133694885