Vue Router的使用步骤（声明式导航）

一、 导入js文件

<script src="lib/vue_2.5.22.js"></script>
<script src="lib/vue-router_3.0.2.js"></script>

注意：router.js一定要放到vue之后

二、添加路由链接

<div id="app">
    <router-link to='/rou'>路由</router-link>
    <router-link to='这个值渲染成hash值'>这里是a标签的值</router-link>
</div>

注意：<router-link> 是路由中提供的标签，默认会被渲染为a标签，to属性默认被渲染为href属性， to属性的值会被渲染为#开头的hash地址

三、添加路由填充位（路由占位符）

<div id="app">
    <router-link to='/rou'>路由</router-link>
    <router-link to='这个值渲染成hash值'>这里是a标签的值</router-link>
          <!-- 路由占位符  --> 
    <router-view></router-view>
</div>

注意：占位符的作用是：路由规则匹配到的组件,将会被渲染到 router-view 所在的位置

四、 定义路由组件

    const rou = {
        template: `
     <div>
         <h3>这是路由页面</h3>
     </div>`
    }

五、 配置路由规则并创建路由实例

    const router = new VueRouter({
        routes: [{
            path: "/rou",
            component: rou
        }]
    })

注意：

1. 每一个路由规则都是一个对象，对象中至少包含 path 和 component 两个属性
2. path表示 路由匹配的 hash 地址，component 表示路由规则对应要展示的组件对象
3. routes是数组

六、将路由挂载到Vue实例中

    var app = new Vue({
        el: '#app',
        router
    })

嵌套路由

一、 现在副路由上创建路由链接和添加路由填充位

//这是父路由    
const rou = {
        template: `
        <div>
            <h3>这是路由页面</h3>
            <router-link to='/rou1'>嵌套路由</router-link>
            <router-view></router-view>
        </div>`
    }

二、 定义嵌套路由组件

    const rou1 = {
        template: `
            <div>
            <h3>这是嵌套的路由页面</h3>
         </div>`
    }

三、 配置路由规则

//用的是children 和routes差不多
    const router = new VueRouter({
        routes: [{
            path: "/rou",
            component: rou,
            children: [{
                path: "/rou1",
                component: rou1,
            }]
        }]
    })

动态路由

html部分

    <div id="app">
        <router-link to='/rou/1'>动态路由1</router-link>
        <router-link to='/rou/2'>动态路由2</router-link>
        <router-link to='/rou/3'>动态路由3</router-link>

        <router-view></router-view>
    </div>

js部分

    const rou = {
        template: `
        <div>
            <h3>这是动态路由</h3>
        </div>`
    }

    const router = new VueRouter({
        routes: [{
            path: "/rou/:id",
            component: rou,
        }]
    })

    var app = new Vue({
        el: '#app',
        router
    })

其实就是在配置路由规则的时候加上"/rou/:id" 就生成动态路由了

动态路由的传参

props :true 直接传

props:{ } 对象传

pops:()=>({}) 函数传

一、 直接传 在配置路由规则的时候加上 props :true 即可路由组件用props接收即可

二、 props:{ uname: 'lisi', age: 20 }

三、 props:route=>({ uname: 'zs', age: 20, id: route.params.id })

编程式导航

调用js的api方法实现导航

就是不用 <router-link></router-link>进行处罚直接用事件触发

Vue-Router中常见的导航方式：

1. this.$router.push("hash地址");
2. this.$router.push("/login");
3. this.$router.push({ name:'user' , params: {id:123} });
4. this.$router.push({ path:"/login" });
5. this.$router.push({ path:"/login",query:{username:"jack"} });
6. this.$router.go(n) n是数字 和history.go 相同 如-1 就是后退

实例：

const Register = { 
    template: `<div>
        <button @click="goBack">后退</button>
        </div>`,
    methods: {
        //后退方法
        goBack() {
            this.$router.go(-1)
        }
    }
}