乐码库:一个极速、放心、纯净的下载站! 更新: 资源发布
  • 您的位置:首页 > 技术文档 > JavaScript > Vue.js路由组件vue-router使用方法详解
  • 收藏本页
      Vue.js路由组件vue-router使用方法详解
      发布时间:2016-12-21 08:09:47 关键词: Vue.js,路由组件,vue,router
      内容简介:这篇文章主要为大家详细介绍了Vue.js路由组件vue-router使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下<br />

    使用Vue.js + vue-router 创建单页应用是非常简单的。只需要配置组件和路由映射,然后告诉 vue-router 在哪里渲染即可。

    一、普通方式基本例子:

    <!DOCTYPE html>
    <html lang="en">
    <head>
     <meta charset="UTF-8">
     <title>vue-router使用方法</title>
    </head>
    <body>
     <div id="app">
     <h1>Hello App!</h1>
     <p>
     <!-- 使用 router-link 组件来导航. -->
     <!-- 通过传入 `to` 属性指定链接. -->
     <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
     <router-link to="/foo">Go to Foo</router-link>
     <router-link to="/bar">Go to Bar</router-link>
     </p>
     <!-- 路由出口 -->
     <!-- 路由匹配到的组件将渲染在这里 -->
     <router-view></router-view>
     </div>
     <script src="https://unpkg.com/vue/dist/vue.js"></script>
     <script src="https://unpkg.com/vue-router"></script>
     <script>
    
     // 1. 定义(路由)组件。
     // 可以从其他文件 import 进来
     const Foo = { template: '<div>foo</div>' }
     const Bar = { template: '<div>bar</div>' }
    
     // 2. 定义路由
     // 每个路由应该映射一个组件。 其中"component" 可以是
     // 通过 Vue.extend() 创建的组件构造器,
     // 或者,只是一个组件配置对象。
     const routes = [
     { path: '/foo', component: Foo },
     { path: '/bar', component: Bar }
     ]
    
     // 3. 创建 router 实例,然后传 `routes` 配置
     const router = new VueRouter({
     routes // (缩写)相当于 routes: routes
     })
    
     // 4. 创建和挂载根实例。
     // 记得要通过 router 配置参数注入路由,
     // 从而让整个应用都有路由功能
     const app = new Vue({
     router
     }).$mount('#app')
    
     // 现在,应用已经启动了!
     </script>
    </body>
    </html>
    

    二、块化机制编程基本例子,以在vue-cli中的使用方法为例

    安装vue-router插件

    # npm install vue-router --save-dev

    在src文件夹下面的components文件夹下新建Foo.vue、Bar.vue两个组件,在Foo组件写入以下内容

    <template>
     <div>foo</div>
    </template>
    

    在Bar.vue组件中写入以下内容

    <template>
     <div>bar</div>
    </template>
    

    打开src文件夹下面的app.vue文件,修改代码为

    <template>
     <div id="app">
     <router-view
     class="view"
     keep-alive
     transition
     transition-mode="out-in">
     </router-view>
     </div>
    </template>
    

    这里用 router-view 来把刚才新建的两个页面加载到这里来,修改src文件夹下面的main.js文件

    import Vue from 'vue'
    import App from './App'
    //引用路由插件
    import VueRouter from 'vue-router'
    
    //使用路由插件
    Vue.use(VueRouter)
    
    //引入组件 
    import Foo from './components/Foo'
    import Bar from './components/Bar'
    
    const routes = [
     { path: '/foo/' , component: Foo },
     { path: '/bar/' , component: Bar },
    ]
    
    //使用路由规则
    const router = new VueRouter({
     routes
    })
    //加载路由规则
    new Vue({
     router,
     el: '#app',
     render:h => h(App)
    })
    
    

    然后运行npm run dev查看效果吧。

    本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持乐码库。

      最新更新
      热门排行榜