Vue Router的安装和演示示例

最新推荐文章于 2024-07-18 17:56:10 发布

原创最新推荐文章于 2024-07-18 17:56:10 发布 · 620 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

折扇戏美人

标签

#vue.js

本文介绍了如何在Vue.js项目中安装和配置Vue Router，通过示例展示了如何创建路由、设置子路由以及在组件中使用router-link和router-view进行导航。同时，还展示了Home.vue组件的结构，用于展示导航链接。

安装

在这里插入图片描述

NPM

npm install vue-router

如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能：

// 从 NPM引入的包
import VueRouter   from 'vue-router'
// 引入自己写的router实例
import router from './router/router.js'

Vue.config.productionTip = false
Vue.use(VueRouter)
new Vue({
  render: h => h(App),
  router  // 挂载自己写的router实例
}).$mount('#app')

创建router.js 实例

import VueRouter from "vue-router";
import Demo from "../components/Demo";
import Happy from "../components/Happy";
import News from "../components/News";
import Message from "../components/Message";
import Content from "../components/Content";

export default new VueRouter({
    routes: [
        {
            path: '/demo', //跳转路径
            component: Demo,  //组件名称
            children: [   // 子组件
                {
                    path: 'news',
                    name: 'news',   // router命名
                    component: News,
                    children:[
                        {
                            path:'content/:id/:title',
                            name:'content',
                            component:Content
                        }
                    ]
                },
                {
                    path: 'message',
                    component: Message
                }
            ]
        },
        {
            path: '/happy',
            component: Happy
        }
    ]
})

Home.vue 组件

<template>
<div>
    <router-link to="/demo">Demo</router-link>
    <!-- 使用 router-link 组件来导航. -->
    <!-- 通过传入 `to` 属性指定链接. -->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    <!--  * router跳转路由标签，替代<a></a>  -->
    
    <router-link to="/happy">Happy</router-link>
    
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  
  <router-view></router-view>
</div>
</template>