投稿
  1. 极客之音首页
  2. 技术随笔

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

飞熊 • • 技术随笔 • 阅读 310

如果你不相信努力和时光，那么成果就会是第一个选择辜负你的。不要去否定你自己的过去，也不要用你的过去牵扯你现在的努力和对未来的展望。不是因为拥有希望你才去努力，而是去努力了，你才有可能看到希望的光芒。vue学习-12路由组件的基本使用，希望对大家有帮助，欢迎收藏，转发！站点地址：www.bmabk.com，来源：原文

路由的基本使用

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

1.引入路由

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

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

之后，我们在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');

2.定义路由

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

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

3.创建路由视图

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

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

4.导航

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

函数式导航

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

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

<router-link>标签

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

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

5.嵌套路由

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

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

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);

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">
                    <!-- 原始html标签中我们使用a标签实现页面跳转 -->
                    <!-- <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>
    import Banner from './components/Banner.vue';

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

<style>
    
</style>

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//要跳转的组件
        }
    ]
});

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>

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>

Banner.vue

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

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

<style>

</style>

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)
})

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

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

<template>
  <div>
    <h1>My App</h1>
    <router-view></router-view>
  </div>
</template>

根据路由的不同，<router-view>会渲染相应的子组件。

多级路由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);

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
                }
            ]
        }
    ]
});

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">
                    <!-- 原始html标签中我们使用a标签实现页面跳转 -->
                    <!-- <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>
    import Banner from './components/Banner.vue';

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

<style>
    
</style>

Banner.vue

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

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

<style>

</style>

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">News</router-link>
                </li>
                <li>
                    <router-link class="list-group-item" active-class="active" to="/about/message">Message</router-link>
                </li>
            </ul>
           <router-view></router-view>
        </div>
    </div>
</template>

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

<style>

</style>

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">News</router-link>
                </li>
                <li>
                    <router-link class="list-group-item" active-class="active" to="/home/message">Message</router-link>
                </li>
            </ul>
            <!-- 路由显示标签 -->
            <router-view></router-view>
        </div>
    </div>
</template>

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

<style>

</style>

Message.vue

<template>
    <div>
        <ul>
            <li>
                <a href="/message1">message001</a>&nbsp;&nbsp;
            </li>
            <li>
                <a href="/message2">message002</a>&nbsp;&nbsp;
            </li>
            <li>
                <a href="/message3">message003</a>&nbsp;&nbsp;
            </li>
        </ul>
    </div>
</template>

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

<style>

</style>

News.vue

<template>
    <ul>
        <li>news001</li>
        <li>news002</li>
        <li>news003</li>
    </ul>
</template>

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

<style>

</style>

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/197918.html

赞 (0)
飞熊的头像飞熊bm
0 0

相关推荐

发表回复

登录后才能评论
极客之音——专业性很强的中文编程技术网站，欢迎收藏到浏览器，订阅我们！