vue地址栏中的#，这种情况是因为在入口js文件中，如果你不更改设置的话，vue会默认使用hash模式，该模式下回将路径格式化为 # 开头。

页面中增加 A、B 两个页面的连接，点击可以跳转

A 页面中增加返回操作，B 页面一样操作

index.js 中增加A、B的路由

index.js 文件中增加 A、B 页面的引用

创建 B 页面

创建 A 页面

A页面的设计

路由设计页面

first页面设计

实现页面跳转效果

1. 在template标签下要有一个根div标签，然后div里面定义a和b的跳转标签 

2. 在component里面创建A.vue和B.vue

3. 要设置一个返回标签返回到开始页面

实现效果：

在首页，可以通过链接进入a，b两个“页面”，也可以从a，b两个“页面”返回到首页

template标签下必须有一个根div标签，其他内容都要放在这个div里面

实现页面跳转：

先在src -> components里面创建A、B两个vue页面分别添加页面内容

在index.js中引用A、B两个vue组件

在需要跳转的vue页面中添加<router-link to=""></router-link>跳转，to对应index.js中component的path值

实现简单的页面跳转

主要是通过index.js的配置实现

先创建a、b两个vue页面分别编辑内容并绑定跳转链接

在first中定义两个跳转标签，分别对应a、b页面

<router-link to=""> ：用于跳转， to 对应 index.js 中 component 配置好的路径

书写格式：

<router-link to="/a"> 转向A</router-link>

 <router-link to="/b">转向B</router-link>

index.js的配置项

一定要import三个页面的路径

import First from '@/components/first.vue'

import A from '@/components/a.vue'

import B from '@/components/b.vue'

然后就是页面调用的配置项

  routes: [

    { //first首页的配置项

      path: '/',

      name: 'first',

      component: First

    },

    {//a页面的配置项

      path:'/a',

      name:'a',

      component:A

    },{//b页面的配置项

      path:'/b',

      name:'b',

      component:B

    }

  ]

页面跳转 <router-link to="">

template标签下必须有一个根div, 其他内容都要放在这个div里面

<template>
  <div>
    <p>我是A页面</p>
    <p><router-link to="/">返回</router-link></p>
  </div>
</template>

<script>
</script>

<style>
</style>

<template>
  <div>
    <div>
      <p>我是B页面</p>
      <p><router-link to="/">返回</router-link></p>
    </div>
  </div>
</template>

<script>
</script>

<style>
</style>

<template>
  <div>
    <router-link to="/a">转向A页面</router-link>
    <router-link to="/b">转向B页面</router-link>
  </div>
</template>

<script>
</script>

<style>
</style>

import Vue from 'vue'
import Router from 'vue-router'
import First from '@/components/first'
import A from '@/components/A'
import B from '@/components/B'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'First',
      component: First
    },
    {
      path: '/a',
      name: 'A',
      component: A
    },
    {
      path: '/b',
      name: 'B',
      component: B
    }
  ]
})

路由router-link

代码代码代码

路由标签：<router-link to=""></router-link>