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、点击测试一下，是否可以正常跳转