1、安装vue-cli脚手架
a.下载安装node.js，随包同时也安装了npm;
b.安装vue-cli：npm install vue-cli -g; //全局安装，只需要安装一次，以后新建其他的项目不用安装了
c.vue init webpack demo //初始化项目，注意是vue init，而不是npm init(这个是创建package.json文件的)
先要进入我们项目的安装目录，然后执行下面的操作
d.nmp install //安装项目依赖包，也就是安装package.json里的包
e.npm run dev //开发模式下运行我们的程序。给我们自动构建了开发用的服务器环境和在浏览器中打开，并实时监视我们的代码更改，即时呈现给我们。
f.npm run build //发布文件，项目根目录生成了dist文件夹，这个文件夹里边就是我们要传到服务器上的文件。
2、vue-router：SPA（单页应用）的路径管理器
☆☆ src/router/index.js，是路由的核心文件，这里面配置路由参数：
引入新增加的路由文件：import Hello from '@/components/Hi'
配置路由名称Hi、路径/Hi和对应的组件模板
☆☆ 在src/components目录下，新建 Hi.vue 文件，文件包括三部分：<template><script>和<style>
以上配置完成之后，可以在url栏修改url即可实现页面的切换
一层路径(/xxx)对应一个router-view
比如url: /a/b/c (假设a、b、c都为正常路径，不会作为参数)
那/a对应的就是App.vue中的router-view，/a进入a.vue这个组件中
那/a/b对应的就是a.vue中的router-view， /a/b进入b.vue这个组件中
<router-view/>显示模板文件(xx.vue文件)里面的内容
{
path:'/hi1', //path值是自定义的，和app.vue里的router-link的to的值一样
component:Hi1 //component的值就是import引入的组件名称，和组件名称名字一样
}
##3、router-link：制作导航栏
写在src/App.vue文件中的template里
<router-link to="/">[显示字段]</router-link>，如：
<p>导航 ：
<router-link to="/">首页</router-link>
<router-link to="/hi">Hi页面</router-link>
</p>
4、vue-router配置子路由
子路由的情况一般用在一个页面有他的基础模版，然后它下面的页面都隶属于这个模版，只是部分改变样式。
步骤和2相同，不同之处在于配置路由参数，在原有的路由配置下加入children字段
如：Hi1页面隶属于Hi页面
{
path:'/hi',
component:Hi,
children:[
{path:'/',name: 'Hi',component:Hi},
{path:'hi1',name: 'Hi1',component:Hi1}
//path值可以自定义，不必和组件名一样，name值可以不写，component的值就是组件名称
]
}
5、vue-router参数传递
a.使用to属性传递
使用router-link中的to属性进行传参，这时候的to必须使用绑定形式，即：
:to
☆☆router-link 定义点击后导航到哪个路径下
<router-link :to="{name:'子路由的name值',params:{key:value}}"></router-link>
☆☆ name：就是我们在路由配置文件中起的name值。
☆☆ params：就是我们要传的参数，它也是对象形式，在对象里可以传递多个值。
☆☆ 接受参数值
在模板文件里面接收(路由文件模板)，如src/compontnes/Hi1.vue用{{route.params.newsId}}
{{$route.params.newsTitle}}
在App.vue文件里面，加上我们要传递过去的值
<router-link to="/params/198/i am newsTitle">params</router-link>
6、单页面多路由区域操作
<router-view/>显示模板文件(xx.vue文件)里面的内容，对应的组件内容渲染到router-view中
router-link 和router-view 标签一一对应，成对出现，router-view只出现在app.vue里面，components里面的组件都不需要加router-link 和router-view
配置使得一个页面里面有2个以上<router-view>区域
a。src/App.vue里面配置<router-view>，需要几个区域就写上几个<router-view>标签
<router-view name="right"></router-view> //name对应components里面的值
b。在router/index.js路由配置文件里面，引入对应的路由区域文件模板，如import Hi1 from '@/components/Hi1'
c。配置需要在components字段里进行(注意多个router-view就是components了，加个s)。如：
{
path: '/Hi',
components: {
default:Hello,
left:Hi2,
right:Hi1
}
}
7、vue-router 的重定向-redirect
a.在src/App.vue里面新添加导航
<router-link to="/goHome">goHome</router-link>
b.在router/index.js路由配置文件里面，不需要引入路由模板了，因为是重定向
{
path:'/goHome', //表示要跳转到哪里
redirect:'/' //重定向到首页,这里不需要component了
}
***重定向的时候同时传递参数
a.在src/App.vue里面新添加导航
<router-link to="/goParams">goParams</router-link> //这里面的goParams和路由里面的path值是一样的
b.在router/index.js路由配置文件里面
{
path:'/goParams/:id/:title',
redirect:'/params/:id/:title' //跳转的路径
}
8、alias别名：也可以实现类似重定向的效果
<router-link to="/xiao">xiao</router-link> //这里面的xiao和路由里面的alias值是一样的
{
path:'/Hi1' //需要重定向到的页面
component:Hi1 //该页面对应的组件
alias:'/xiao' //自己取的别名
}
☆☆redirect和alias的区别
redirect：仔细观察URL，redirect是直接改变了url的值，把url变成了重定向的页面的path路径。
alias：URL路径没有改变，更友好，让用户知道自己访问的路径，只是改变了<router-view>中的内容。
☆☆填坑：别名alias请不要用在path为’/’中，如下代码的别名是不起作用的。
{
path: '/',
component: Hello,
alias:'/home'
}
9、路由的过渡动画
想让路由有过渡动画，需要在<router-view>标签的外部添加<transition>标签，标签还需要一个name属性。
<transition>
<router-view name="fade" mode="out-in"></router-view>
</transition>
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属性在这两个类下进行设置。
**过渡模式mode**：
**in-out**:新元素先进入过渡，完成之后当前元素过渡离开。
**out-in**:当前元素先进行过渡离开，离开完成后新元素过渡进入。--------这种模式好
10、mode作用
此mode不是上面的过度动画里面的mode，在export default new Router({})里面设置
export default new Router({
mode:history',
routes:[
{
}
]
})
mode的两个值
histroy:当你使用 history 模式时，URL 就像正常的 url，例如 http://jsapng.com/lms/，也好看！不带#
hash:默认’hash’值，但是hash看起来就像无意义的字符排列，不太好看也不符合我们一般的网址浏览习惯。
11、404页面设置
和设置子路由一样方式，只不过在path里面，值改为*
12、路由中的钩子
a.路由配置文件中的钩子函数
我们可以直接在路由配置文件（/src/router/index.js）中写钩子函数。但是在路由文件中我们只能写一个beforeEnter,就是在进入此路由配置时。
这是一个函数，有三个参数from对象、to对象、next()函数——一个开关，是否跳转到目标页面
from对象：路径跳转前的路径信息，也是一个对象的形式。表示是从哪个页面进入到本页面
to对象：路由将要跳转的路径信息，信息是包含在对像里边的。表示要进入的页面是哪个
next()：路由的控制参数，常用的有next(true)和next(false)。一个开关，表示是否进行跳转到目标页面
next()一定要写上，否则就是没开开关，禁止跳转了
默认是next()：可以跳转，加参数就是：
next(true)：可以跳转
next(false)：不可以跳转
b.写在模板中的钩子函数：有两个钩子函数可以使用
beforeRouteEnter：在路由进入前的钩子函数
beforeRouteLeave：在路由离开前的钩子函数
可以监控到路由的进入和路由的离开，也可以轻易的读出to和from的值。
beforeRouteEnter:(from,to,next)=>{
//do something
}
beforeRouteLeave:(from,to,next)=>{
//do something
}
13、编程式导航
不在html代码中使用router-link进行页面跳转，而是在js代码(业务逻辑)里面进行页面跳转
methods:{
goBack(){
this.$router.go(-1);
},
goForward(){
this.$router.go(1);
},
goHome(){
this.$router.push("/")
}
}
网友评论