Vue之vue Router入门

vue router在整个vue里面是非常重要的一部分，所以必须牢牢掌握

一、什么的vue router

vue router也叫vue路由，它类似于Node中的路由，但它们有一点点的不同

• Node路由：是根据不同的请求地址，来执行不同的代码
• Vue路由：是根据不同的路径，来执行不同的组件

再来温习一下组件

• 组件注册：全局注册和局部注册
• 组件分类：路由组件和普通组件

---

二、使用vue路由

第一步:引入vue-router

引入vue-router.js，可以从官网上可以拿到

注意：引入的顺序是：vue.js>>>>vue-router.js

第二步：创建vue组件

html

<div id="app">

<!--    在vue路由里面，我们需要使用router-link这个标签来跳转页面
        用router-link标签里面的to属性拼接上，我们自己写好的路由
-->
    <router-link to="/res">注册</router-link>
    <router-link to="/login">登录</router-link>
   
<!--    展示组件-->
    <router-view></router-view>
</div>

<template id="res">
    <h1>注册</h1>
</template>

<template id="login">
    <h1>登录</h1>
</template>

js

<script>
    let res = {
        template: '#res'
    }
    let login = {
        template: '#login'
    }
</script>

---

第三步：创建vue路由

//创建路由
    let router = new VueRouter({
        routes:[{
            name:'res',//路由名称
            path:'/res',//组件对应的路由路径
            component:res
        },{
            name:'login',
            path:'/login',
            component:login
        },]
    })

new Vue({
        el: '#app',
        components: {res, login},
        //挂载路由
        router,
    })

注意：创建完vue路由后，一定要在new vue里面进行引入

name是路由的名称，可以随便写，但最好的组件名称

path的设置路由的地址，只要是 / 加 英文即可

component是组件名称，必须是你设置组件的名称，不能随意写