步骤一:引入:(2种方法,脚手架&html中引入)

             方法一:html中引入

引入方法一

1.引入vue-router.js文件
1) html引入 
  <script src="js/vue.js"></script> 
 <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
2)定义组件
let goodlist = {template:"<div>商品列表</div>"}
let goodsdetail = {template:"<div>商品详情</div>"}
3)定义路由对象
   3.1)路由配置(json数组)
        let routes = [
                            {path:'/goodslist',component:goodlist},
                            {path:'/goodsdetail',component:goodsdetail}
                           ];   3.2) 实例化一个vueRouter对象    
       let router = new VueRouter({
                            routes:routes
                                                 });4)、挂载vueRouter对象
实例化vue对象,(把vueRouter对象,挂载(注册)到vue对象里)
      let vm = new Vue({
                 el:"#app",
                   router
                   });5)、跳转代码(声明式)
             <h1>路由跳转</h1>
                  <hr/>
               <router-link to='/goodslist'>商品列表</router-link>-------------跳转路径
              <router-link to='/goodsdetail'>商品详情</router-link>
                 <hr/>
                 <router-view></router-view>------展示区解释:
<router-link></router-link>:  超链, 相当于标签a 。
<router-view></router-view>:  组件显示的位置

         方法二:脚手架中引入

引入方法二:脚手架中

 

2.模块化的方式(脚手架里)
脚手架安装时,会默认安装vue-router。
1)安装 cmd命令
npm i vue-router -S (--save的缩写)
2)定义vue文件
3)在src中创建router文件夹,文件夹内创建index.js文件
4)index.js中创建vueRouter对象,并做路由配置和引入
 4.1
在src/router/index.js中
(1)引入vue:import Vue from "vue"
(2)引入vueRouter :import vueRouter from "vue-router"
(3)安装插件包vue-router到Vue上:Vue.use(vueRouter )
(4)路由配置,路径和组件之间的对应关系(根据路径找到对应的组件):

        let routes = [ {
        name:"home",----------name可以代替路径来使用

        path:"/Home",-----------------------需要先引入组件import 
        component:Home----------组件名
        redirect:/home-----------------重定向:地址栏输入/,就会找到到home的路径,再跳到home主页


vue axios 中如何进行页面跳转 vue界面跳转_vue.js



    },

vue axios 中如何进行页面跳转 vue界面跳转_javascript_02

或者在组件内引入

vue axios 中如何进行页面跳转 vue界面跳转_vue.js_03

懒加载写法(每个组件打个包)

vue axios 中如何进行页面跳转 vue界面跳转_vue axios 中如何进行页面跳转_04



(5)路由实例
router = new VueRouter(
        routes
        mode: 'history',-----------默认为
        base: process.env.BASE_URL,
        routes
    })
(6)导出路由实例,让它植入vue根
router









(7)在main.js中引入vueRouter对象,并植入根属性,其他组件就可以使用$router拿到vue对象

       7.1)import router from './router'

       7.2)把router植入根属性里

vue axios 中如何进行页面跳转 vue界面跳转_javascript_05


(8)404页面路由配置,放在路由配置最后面


vue axios 中如何进行页面跳转 vue界面跳转_前端_06



还可以直接写成对象的形式

vue axios 中如何进行页面跳转 vue界面跳转_vue.js_07

步骤二:两种方法实现在组件内的跳转(标签类的 声明式跳转& 编程式跳转)

声明式跳转原理:(相当于添加组件)

<router-link to ="路径"></router-link>(自定义默认是是a标签 ) 

  to后面可以为字符串,也可以为对象

vue axios 中如何进行页面跳转 vue界面跳转_前端_08

先改变地址栏,再找路由配置,再找展示页面 

vue axios 中如何进行页面跳转 vue界面跳转_前端_09

路径中的#号代表: 锚点链接

tag:可以改变标签的类型

active-class: 当前页面的样式 字体放大

模糊搜索时添加

vue axios 中如何进行页面跳转 vue界面跳转_vue axios 中如何进行页面跳转_10

跳转原理

vue axios 中如何进行页面跳转 vue界面跳转_javascript_11

 编程式跳转(添加事件)

this.$router.push(“路径”)

路由对象有一个栈(压栈弹栈,先进后出),记录着跳转的所有路径,push函数会把跳转的路由保存在栈里,

<router-link to=""><router-link>也会吧记录保存在栈里

vue axios 中如何进行页面跳转 vue界面跳转_vue axios 中如何进行页面跳转_12

步骤三:

               router-view---------展示区