11.2 新增问题:
函数触发路由,采用两种方式。第一种router-link。第二种this.$router.push({path:'/address'})
两种方式都可以跳转,但是第二种方式,触发后,原先绑定的CSS样式,无法通过 false 来取消。
然后吃完饭回来,我就发现我傻了,我是通过点击来触发事件,点击后,页面都跑了,我当然看不到样式改变啊。
所以老老实实用 router-link吧。
比起写死的 会好一些,理由如下:
无论是 HTML5 history 模式还是 hash 模式,它的表现行为一致,所以,当你要切换路由模式,或者在 IE9 降级使用 hash 模式,无须作任何变动。
在 HTML5 history 模式下,router-link 会守卫点击事件,让浏览器不再重新加载页面。(默认是hash模式)
当你在 HTML5 history 模式下使用 base 选项之后,所有的 to 属性都不需要写(基路径)了。
如何理解第二点和第三点?具体是什么样的?
HTML:
结算( {{calTotalAmount}} )
JS:
toLink : function(fn) {var href = ''
if (fn > 0) {
console.log('可以跳转')this.isActive = false
//this.$router.push({path:'/address'})
href = '/address'}else{this.isActive = true}returnhref
}
------------------------- 以下是原文 ------------------------
今天准备细细捋一遍vue + webpack 项目的路由配置。
项目背景:
1. v-cli 脚手架搭建
2. 基于webpack
项目的src目录结构如下:
下面来捋一遍步骤
1. 新建一个page文件夹,创建 index.vue 文件,准备把这个页面作为项目 npm run dev后的默认显示页。
2. 在router文件夹下的 index.js 配置路由。
import Vue from 'vue'import Router from'vue-router'import Index from'@/page/index'import Address from'@/page/address'import Login from '@/components/login'Vue.use(Router) //这里别漏掉了
exportdefault newRouter({//mode:'history', //去掉浏览器 url 的 # 号,但是跳转到别的页面时,还会有诶...http://localhost:8080/#/address
routes: [
{
path:'/',
component: Index
},{
path:'/address', //https://router.vuejs.org/zh-cn/essentials/dynamic-matching.html 动态路由匹配
component: Address
},{ path: '/login', component: Login}
]
})
3. 回到index.vue。 index.vue,我好像啥都没干,这是默认页
下面说说用 这俩标签的方式:
注释: router-link标签渲染时会自动增加一个A标签带href路转。
router-view标签是将路由过来的组件渲染在什么地方。(实际实验了下,感觉不太能理解。一会做下实验看看)
4. 在components 下创建一个login.vue 。
i'm login, i'm not ready
随便写点什么
回到index.vue,在需要的位置下添加这一行:
登录
这是效果。
总结: 配置路由三部曲:
1. 新建 .vue 文件。
2. 在router - index.js 下 import 导入新建的.vue,再配置路径。
3. 在首页添加 标签
但是这里有一个小问题,我不想页面跳转。我希望这个登录页的内容,点击后,直接在默认页上出现。
新建一个项目试试看。
新建项目,按照以上方式建立两个 .vue,再在路由里配置,可以在本页出现,有点像点击切换效果...
估计和我那个项目某个配置有关。