vue中如何操作页面跳转

一、路由的作用

vue的路由使用在SPA（单页面应用程序，可查看下面的链接），相当于a标签，实现组件跳转。  https://www.jianshu.com/p/1b4d9d319a7b二、路由的使用

步骤一：引入：（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主页     }, 或者在组件内引入 懒加载写法（每个组件打个包） （5）路由实例     let router = new VueRouter(         routes         mode: 'history',-----------默认为         base: process.env.BASE_URL,         routes     }) （6）导出路由实例，让它植入vue根      export default  router 还可以直接写成对象的形式 （7）在main.js中引入vueRouter对象，并植入根属性，其他组件就可以使用$router拿到vue对象        7.1）import router from './router'        7.2）把router植入根属性里 （8）404页面路由配置，放在路由配置最后面

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

声明式跳转原理：(相当于添加组件）

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

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

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

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

tag:可以改变标签的类型

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

模糊搜索时添加

跳转原理

 编程式跳转（添加事件）

this.$router.push（“路径”）

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

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

步骤三：

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