对于Vue2.0的个人小结（二）--vue-routervue-router的安装与使用，router-link，rou

前文

BOM:浏览器对象

1>location对象

location.href
location.search
location.hash
location.host
location.hostname
loaction.psthname
location.port
location.protocol
location.assign
location.replace()
location.reload()

2>history对象

history.go()
history.back()
history.forward()

3>navigator对象

navigator.userAgent
navigator.cookieEnabled

一、vue-router的基本使用

1，安装vue-router

npm install vue-router --save

2，导入路由对象，并且调用VUe.use(VUeRouter)

3，创建路由实例，并且传入路由映射配置

4，在Vue实例中挂载创建路由实例

二、使用`vue-router`的步骤

1，创建路由组件

2，配置路由映射:组件与路径与映射关系

3，使用路由:通过<router-link>和<router-view>占位即显示组件位置

4，设置默认路径,修改路由模式hash/history(默认是hash模式)

{
    path:'',
    redirect:'/home'
}
const router = new VueRouter({
    routes,
    mode:'history'
})

三、router-link

1，默认的<router-link>渲染成<a>标签

2，属性to -> 可以跳转到指定的路由

<router-link to='/home'></router-link>

3，属性tag -> 可以选择渲染成什么标签

<router-link to='/home' tag='li'></router-link>

4，属性replace -> 禁止浏览器上的左右箭头切换

<router-link to='/home' tag='li' replace></router-link>

四、动态路由 -> /home/动态参数

$router与$route
$router:就是通过VueRouter new出来的对象
$route:活跃状态的路由

五、路由懒加载 -> 用到再加载

方式一:结合Vue的异步组件和Webpack的代码分析

const Home = resolve => {
    require.ensure(
        ['../components/Home.vue']
    ),() => {
        resolve(require(['../components/Home.vue']))
    }
}

方式二、AMD写法

const About = resolve => require(['../components/About.vue'])

方式三:在ES6中，组织Vue异步组件和Webpack代码分割

const Home = () => import('../components/Home.vue')

六、嵌套路由

步骤:

1，创建对应的子组件，并且在路由映射中配置对应的子路由

2，在组件内部使用标签，对应to上的路径要写完整路径

Home组件内部编写对应的内容:
<router-link to="/Home/HomeSon">HOmeSon</router-link>
<router-link to="/home/HomeDaughter">HomeDaughter</router-link>
<router-view></router-view>

七、传递参数 -> 页面跳转传递参数

两种方式:Prams/query

params的类型 ->

配置路由格式:/router/:id
传递的方式:在path后面跟上对应的值
传递后形成的路径:/router/123,/router/abc

query的类型 ->

配置路由格式:/router,即普通配置
传递的方式:对象中使用query的key作为传递方式
传递后形成的路径:'/router?id=123,/router?id=abc'

协议类型:服务器地址：端口号/路径/查询(query)

获取当前当前路由下的query属性

$route.query.name/$route.query.age

八、导航守卫

需求:修改每个页面的标题

方法一:在对应的组件对应的生命周期中document.title='name' 方法二:监听全局跳转

配置的各个路由下添加属性：
{
    path:'/home',
    component:Home,
    meta:{
        title:'标题'
    }
}

router.beforeEach((to,from,next) => {
    1，没有子路由
    ducument.title = to.meta.title//这里的to相当于由VueRouter创建的对象
    2，有子路由 -> /home/son
    document.title = to.matched[0].meta.title
})

补充一: 前置守卫(跳转前)

router.beforeEach((to,from,next) => {})

后置守卫/勾子(跳转后)

router.afterEach((to,from) => {})

补充二：router.vuejs.org/zh/installa…

1，路由独享守卫

router.beforeEnter((to,from,next) => {})

2，组价内的守卫

beforeRouterEnter((to,from,next) => {})
beforeRouterUpdate((to,from,next) => {})
beforeRouterLeave((to,from,next) => {})

九、keep-alive -> 让组件缓存下载不被销毁

需求：缓存在上一组件的改变步骤1，将默认的路由保存在data中

步骤2，给当前页面添加路径

activated(){
    this.$router.push(this.path);
}

步骤3，组件内守卫 -> 记录离开页面的路径

beforeRouterLeave((to,from,next) => {
    this.path = this.$route.path;
    next()
})

keep-alive的属性 include/exclude

<keep-alive exclude="Home">//Home组件不会被缓存
    .........
</keep-alive>

<router-view>也是一个组件，如果直接包含在keep-alive里面，所有路径匹配到的视图组件都会被缓存。

对于Vue2.0的个人小结（二）--vue-router