vue.js中的路由vue-router2.0使用

時間 2019-11-13

標籤 vue.js vue 路由 router2.0 router 使用欄目 JavaScript 简体版

原文原文鏈接

在咱們平時工做中，咱們有時候會有需求，按照不一樣的規則，加載不一樣的組件，頁面不去跳轉，常見的操做是ajax的異步操做，實現局部刷新加載新數據html

在vue中，咱們寫了不少不一樣的組件，這時候，實現不刷新調用新組件，vue爲咱們提供了很是好用的一個插件，那就是路由vue

vue-router

咱們首先去安裝路由jquery

在工具管理器裏面咱們直接敲命令ajax

npm install vue-router --savevue-router

有些同窗可能一開始不知道npm是什麼東西，那麼咱們能夠去下載vue-router文件到頁面中去，像jquery同樣引進就能夠npm

<!DOCTYPE html>
<html lang="en">
 <head> 
  <meta charset="UTF-8" /> 
  <title>Document</title> 
  <script src="https://unpkg.com/vue/dist/vue.js"></script> 
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
 </head> 
 <body> 
     <div id="app">
           <!-- 使用 router-link 組件來導航. -->
        <!-- 經過傳入 `to` 屬性指定連接. -->
        <!-- <router-link> 默認會被渲染成一個 `<a>` 標籤 -->
         <router-link to="/foo">1</router-link>
        <router-link to="/bar">2</router-link>
        <!-- 路由匹配到的組件將渲染在這裏 -->
        <router-view></router-view>
     </div>
 </body>
 <script>
     // 1. 定義（路由）組件。
    // 能夠從其餘文件 import 進來
    const Foo = { template: '<div>foo</div>' }
    const Bar = { template: '<div>bar</div>' }
    // 2. 定義路由
    // 每一個路由應該映射一個組件。 
    let routes=[
        {
            path:'/foo',
            component:Foo
        },
        {
            path:'/bar',
            component:Bar
        }
    ]
    // 3. 建立 router 實例，而後傳 `routes` 配置
     let router = new VueRouter({
        routes
    });
    // 4. 建立和掛載根實例。
    const app=new Vue({
      router
    }).$mount('#app');
 </script>
</html>