vue router html模板,vue.router

一.安装vue-router

vue-router是一个插件包，所以我们还是需要用npm来进行安装的。打开命令行工具，进入你的项目目录，输入下面命令。npm install vue-router --save

二.解读router/index.js文件我们用vue-cli生产了我们的项目结构，你可以在src/router/index.js文件，这个文件就是路由的核心文件

importRouterfrom'vue-router'//引入vue-router

importHellofrom'@/components/Hello'//引入根目录下的Hello.vue组件

Vue.use(Router)//Vue全局使用Router

exportdefaultnewRouter({

routes:[//配置路由，这里是个数组

{//每一个链接都是一个对象

path:'/',//链接路径

name:'Hello',//路由名称，

component:Hello//对应的组件模板

}

]

})

三.简易导航制作

1》改造App.vue的导航代码

2》改写components/Hi.vue页面

3》在components目录下新建两个组件模板 Hi1.vue 和 Hi2.vue

4》修改router/index.js代码

四.vue-router如何参数传递

方法1,使用name传参(实际开发并不常用)

(1)在路由配置文件中写name

(2)App.vue  中接收参数{{ $route.name }}}

方法2，修改html模板中的router-link标签

注意事项：(1)name的值要和路由配置中的name保持一致

(2)参数params的值可以传多个，是对象的形式存在的  key：value

操作方法：

1.router文件中index.js

2.App.vue文件(注意，如果为动态传参，提前必须加v-bind：或者其缩写：)

3.组件文件中的hi1.vue文件

最终显示效果为

方法3.vue-router 利用url传递参数----       :冒号的形式传递参数

在配置文件里以冒号的形式设置参数。我们在/src/router/index.js文件里配置路由。

我们需要传递参数是新闻ID(newsId)和新闻标题(newsTitle).所以我们在路由配置文件里制定了这两个值。

在src/components目录下建立我们params.vue组件，也可以说是页面。我们在页面里输出了url传递的的新闻ID和新闻标题。

在App.vue文件里加入我们的标签。这时候我们可以直接利用url传值了。

扩展：url里面的正则

加入正则需要在路由配置文件里(/src/router/index.js)以圆括号的形式加入。path:'/params/:newsId(\\d+)/:newsTitle',

加入了正则，我们再传递数字之外的其他参数，params.vue组件就没有办法接收到。

五.单页面多路由区域操作

实际需求是这样的，在一个页面里我们有2个以上区域，我们通过配置路由的js文件，来操作这些区域的内容。例如我们在src/App.vue里加上两个标签。我们用vue-cli建立了新的项目，并打开了src目录下的App.vue文件，在下面新写了两行标签,并加入了些CSS样式。

现在的页面中有了三个标签，也就是说我们需要在路由里配置这三个区域，配置主要是在components字段里进行。

六.vue-router 的重定向-redirect

redirect基本重定向

路由文件index.js配置路由

App.vue文件

重定向时传递参数

路由文件index.js配置路由(redirect直接写要跳转的路径)

App.vue文件

七.alias别名的使用

1.首先我们在路由配置文件里(/src/router/index.js)，给Home路径起一个别名，huaqian。

2.配置我们的，起过别名之后，可以直接使用标签里的to属性，进行重新定向。

redirect和alias的区别redirect：仔细观察URL，redirect是直接改变了url的值，把url变成了真实的path路径。

alias：URL路径没有别改变，这种情况更友好，让用户知道自己访问的路径，只是改变了中的内容。

填坑：别名请不要用在path为’/’中，如下代码的别名是不起作用的。

{

path:'/',

component:Hello,

alias:'/home'

}

八.路由的过渡动画

标签

想让路由有过渡动画，需要在标签的外部添加标签，标签还需要一个name属性。

我们在/src/App.vue文件里添加了标签，并给标签起了一个名字叫fade。

其中过渡模式mode里面的值out-in指的是先退出后进入。默认是in-out

in-out:新元素先进入过渡，完成之后当前元素过渡离开。

out-in:当前元素先进行过渡离开，离开完成后新元素过渡进入。

css过渡类名：组件过渡过程中，会有四个CSS类名进行切换，这四个类名与transition的name属性有关，比如name=”fade”,会有如下四个CSS类名：

fade-enter:进入过渡的开始状态，元素被插入时生效，只应用一帧后立刻删除。

fade-enter-active:进入过渡的结束状态，元素被插入时就生效，在过渡过程完成后移除。

fade-leave:离开过渡的开始状态，元素被删除时触发，只应用一帧后立刻删除。

fade-leave-active:离开过渡的结束状态，元素被删除时生效，离开过渡完成后被删除。

从上面四个类名可以看出，fade-enter-active和fade-leave-active在整个进入或离开过程中都有效，所以CSS的transition属性在这两个类下进行设置。

那我们就在App.vue页面里加入四种CSS样式效果，并利用CSS3的transition属性控制动画的具体效果。代码如下：

九.mode的设置和404页面的处理

mode的两个值

histroy:当你使用 history 模式时，URL 就像正常的 url，例如 http://jsapng.com/lms/，也好看！

hash:默认’hash’值，但是hash看起来就像无意义的字符排列，不太好看也不符合我们一般的网址浏览习惯。

404页面的设置：

用户会经常输错页面，当用户输错页面时，我们希望给他一个友好的提示，为此美工都会设计一个漂亮的页面，这个页面就是我们常说的404页面。vue-router也为我们提供了这样的机制.

1.设置我们的路由配置文件(/src/router/index.js)：

2.新建404页面：

在/src/components/文件夹下新建一个Error.vue的文件。简单输入一些有关错误页面的内容。

3.我们在用瞎写一个标签的路径。

十.路由中的钩子

路由配置文件中的钩子函数

我们可以直接在路由配置文件(/src/router/index.js)中写钩子函数。但是在路由文件中我们只能写一个beforeEnter,就是在进入此路由配置时。先来看一段具体的代码：

我们在params路由里配置了bdforeEnter得钩子函数，函数我们采用了ES6的箭头函数，需要传递三个参数。我们并在箭头函数中打印了to和from函数。具体打印内容可以在控制台查看object。三个参数：

to:路由将要跳转的路径信息，信息是包含在对像里边的。

from:路径跳转前的路径信息，也是一个对象的形式。

next:路由的控制参数，常用的有next(true)和next(false)。

写在模板中的钩子函数

在配置文件中的钩子函数，只有一个钩子-beforeEnter，如果我们写在模板中就可以有两个钩子函数可以使用：beforeRouteEnter：在路由进入前的钩子函数。

beforeRouteLeave：在路由离开前的钩子函数。

这是我们写在params.vue模板里的路由钩子函数。它可以监控到路由的进入和路由的离开，也可以轻易的读出to和from的值。

十一.编程式导航

this.$router.go(-1) 和 this.$router.go(1)

这两个编程式导航的意思是后退和前进，功能跟我们浏览器上的后退和前进按钮一样，这在业务逻辑中经常用到。比如条件不满足时，我们需要后退。

router.go(-1)代表着后退，我们可以让我们的导航进行后退，并且我们的地址栏也是有所变化的。

1.我们先在app.vue文件里加入一个按钮，按钮并绑定一个goback( )方法。

2.在我们的script模块中写入goback()方法，并使用this.$router.go(-1),进行后退操作。

this.$router.push(‘/xxx ‘)

这个编程式导航都作用就是跳转，比如我们判断用户名和密码正确时，需要跳转到用户中心页面或者首页，都用到这个编程的方法来操作路由。

我们设置一个按钮，点击按钮后回到站点首页。如上图