vue axios 中如何进行页面跳转 vue界面跳转
转载
步骤一:引入:(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)路由实例
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植入根属性里
(8)404页面路由配置,放在路由配置最后面
|
还可以直接写成对象的形式 |
步骤二:两种方法实现在组件内的跳转(标签类的 声明式跳转& 编程式跳转)
声明式跳转原理:(相当于添加组件)
<router-link to ="路径"></router-link>(自定义默认是是a标签 )
to后面可以为字符串,也可以为对象
先改变地址栏,再找路由配置,再找展示页面
路径中的#号代表: 锚点链接
tag:可以改变标签的类型
active-class: 当前页面的样式 字体放大
模糊搜索时添加
跳转原理
编程式跳转(添加事件)
this.$router.push(“路径”)
路由对象有一个栈(压栈弹栈,先进后出),记录着跳转的所有路径,push函数会把跳转的路由保存在栈里,
<router-link to=""><router-link>也会吧记录保存在栈里
步骤三:
router-view---------展示区
本文章为转载内容,我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题,欢迎原作者联系我们进行内容更正或删除文章。