vue-頁面跳轉-router-link

1、Vue項目新建成功之後，打開src的目錄。

src目錄是我們要寫代碼的目錄

• assets 目錄 用來存放一些靜態資源
• components 目錄 用來存放我們的組件，我們要寫的代碼基本都在這個目錄下，新建的vue頁面都放在這個目錄下
• router 目錄 目錄下index.js 是我們的路由文件，規定了項目中可以訪問的路由
• App.vue 是我們的核心文件，可以理解爲入口文件
• main.js 核心js文件，在這個文件初始化了Vue

2、新建成功之後，默認會產生一個 HelloWorld.vue，而且在我們的路由文件中可以看到

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

在路由文件中定義了 ‘/’ 路由，訪問的路徑是 /，在項目中使用的時候名字定義爲 HelloWorld，對應的組件是 HelloWorld.vue

3、打開HelloWorld.vue修改html頁面中的內容

<template>
  <div class="hello">
    <router-link :to="list">跳轉列表頁</router-link>
    <router-link :to="{name:'detail',query::{id:1}}">跳轉詳情頁</router-link>
  </div>
</template>

要接受對應參數可以使用

console.log( this.$route.query.id );

4、在components 新建一個BlogList.vue的文件

添加一下內容

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <ul>
      <li>
        <a href="https://vuejs.org"  target="_blank" >
         	百度一下，你就知道
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'BlogList',
  data () {
    return {
      msg: 'BlogList.vue' 
    }
  }
}
</script>
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

5、找到路由文件index.js ,添加路由

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }, {
      path: '/list',
      name: 'list',
      component: BlogList
    }
  ]
})

6、點擊測試一下，是否可以正常跳轉