vue理由设置_vue 路由配置

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，再在路由里配置，可以在本页出现，有点像点击切换效果...

估计和我那个项目某个配置有关。