vue-基本路由的使用

一、介绍

VueRouter是Vue.js官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。在使用时我们需要提前安装，配置好环境。
安装
直接下载/CDN

https://unpkg.com/vue-router/dist/vue-router.js

二、创建单页面应用

HTML

<div id="app">
<!--  路由出口 将匹配到的组件渲染在这里 -->
        <router-view></router-view> 
<!-- 导航 默认渲染一个a标签  通过to指定链接 -->
         <router-link to='/denglu'>登录</router-link>
        <router-link to='/zhuce'>注册</router-link>
    </div>

js

• 在routes:[ ]中，每个路由规则，都是一个对象，这个规则对象都有必须的两个属性：

1.path，表示监听哪个路由链接的地址
2.component，表示如果路由是前面匹配到的path，则展示component属性对应的那个组件。component的属性值，必须为一个组件的模板对象，不能是组件的引用名称

//定义路由组件
        var foo ={
            template:'<p>登陆界面</p>'
        }
        var bar ={
            template:'<p>注册界面</p>'
        }

//创建router实例  
        var router= new VueRouter({
//定义路由
          routes:[   //路由规则数组
            {
                path:'/denglu',
                component:foo
            },{
                path:'/zhuce',
                component:bar
            }
        ]
        })      
//创建挂载根实例
        new Vue({
            el:'#app',
           data:{},
           methods:{},
           router:router
        })

其它相关属性
active-class:设置链接激活时使用的class类名

   <style>
   .active{
      background-color : red;
       }
     </style>


    <router-link to='/zhuce' active-class='active'>注册</router-link>

tag:将其渲染成某种标签

<router-link to="/denglu" tag="li">登录</router-link>
<!-- 渲染结果 -->
<li>登录</li>

event：声明用来触发导航的事件
鼠标移上去触发
replace：设置 replace 属性的话，当点击时，会调用 router.replace() 而不是 router.push()，导航后不会留下 history 记录
append：设置 append 属性后，则在当前 (相对) 路径前添加其路径。例如，我们从 /a 导航到一个相对路径 b，如果没有配置 append，则路径为 /b，如果配了，则为 /a/b

         <router-link to='/denglu' event = "mouseover">登录</router-link>

动态路由参数的变化
当路由地址中携带参数，并以冒号开头时，参数值会被设置到params中，我们可以使用this.$route.params获取当中的数据。如：

const User = {
  template: '<div>User</div>'
}
const router = new VueRouter({
  routes: [
    // 动态路径参数 以冒号开头
    { path: '/user/:id', component: User }
  ]
})

const User = {
  template: '<div>User {{ $route.params.id }}</div>'
}

当路由地址中携带参数，并以？key=value时，参数值会被设置到query中，我们可以使用this.$route.query获取当中的数据。如：

 <router-link to='/account/denglu?id=1'>登录</router-link>

 {{this.$route.query}}

watch的应用

在vue中，使用watch来响应数据的变化。
1.使用watch,监听data的数据变化，触发对应的处理函数。也可以给里面传参数，用来监听新值旧值，保存改变过的值

 watch: {
                'firstname':function(newVal,oldVal){
                    console.log('监听到 firstname的变化');

2.使用watch属性监听路由地址的改变（$route.path）

var vm=new Vue({
            el:'#app',
            data:{},
            methods:{},
            router,
            watch: {
                '$route.path':function(newVal,oldVal){
                    if(newVal=='/login'){
                        console.log('欢迎进入到登录界面');
                    }else if(newVal=='/register'){
                        console.log('欢迎进入到注册界面');
                    }
                }
            },
        })

3.deep深度监听
数组（一维、多维）的变化不需要通过深度监听，对象数组中对象的属性变化则需要deep深度监听。