vue的安装和路由的基本使用

路由中有三个基本的概念 route, routes, router

1.route 它是一条路由，由这个英文单词也可以看出来，它是单数。

Home按钮  => home内容， 这是一条route,  about按钮 => about 内容， 这是另一条路由。

2.routes 是一组路由，把上面的每一条路由组合起来，形成一个数组。

[{home 按钮 =>home内容 }， { about按钮 => about 内容}]

3.router 是一个机制，相当于一个管理者，它来管理路由。

因为routes只是定义了一组路由，它放在哪里是静止的，当真正来了请求，怎么办？ 就是当用户点击home 按钮的时候，怎么办？这时router 就起作用了，它到routes 中去查找，去找到对应的 home 内容，所以页面中就显示了 home 内容。

---------------------------------------------------------

路由，其实就是"指向"的意思。 / 路由

当我点击页面上的login按钮时，页面中就要显示login的内容，

如果点击页面上的register按钮，页面中就要显示register的内容。

login按钮 =>login内容，

register按钮=>register内容，

也可以说是一种映射。

所以在页面上有两个部分：

一个是点击部分，一个是点击之后，显示内容的部分。 

---

路由的安装

路由是以插件的形式引入到我们的vue项目中来的

vue-router 路由插件 是vue的核心插件

下载

cnpm install vue-router -S

或

cnpm i vue-router -S

如果你要在项目 使用 vue-router路由插件？大前提： 你一定要 引入vuejs，然后再移入你的路由插件vue-router.

---

路由的基本使用：

1.一定要先引入 vue.js

<script src="./js/vue2.6.14.js"></script>

2.在引入路由插件

<script src="./js/vue-router.js"></script>

3.分三小步

(1)要先拥有子组件

// 为了在配置中更好的区分，组件名推荐大写
let God = {
            template:`#god`
        }
let Pp = {
            template:`#pp`
        }

(2)在根组件中注册子组件

 let vm = new Vue({
            el:'#app',
            components:{
                god,
                pp
            }
        })

(3)并在子组件的视图层有要显示的内容

 <template id="god">
            <div>
                <h1>我是金组件</h1>
            </div>
        </template>
    <template id="pp">
        <div>
            <h1>我是pp组件</h1>
        </div>
    </template>

4.在子组件们下面使用路由插件Vue.use(VueRouter)

不能少,因为在一个模块化工程中使用router，必须要通过Vue.use()明确地安装路由功能

Vue.use(VueRouter)

5.配置路由规则const routes = [{对象},{对象},...]

路由对象{path:'锚点值',component:你要显示的组件}

例如：{path:'/goods', component: Goods}

常量的命名其实是有规则的

官方的路由定义和路由实例的名称分别是：routes和router

const router = new VueRouter({

routes //（缩写）相当于 routes: routes

})

 const routes = [
            {
                path:'/god',
                component:God
            },
            {
                path:'/pp',
                component:Pp
            }
        ]

6.创建路由对象var router = new VueRouter()

let router = new VueRouter({

routes // routes是配置好的内容，声明好的routes放入第4步路由插件

})

 let router = new VueRouter({
            routes
        })

7.将配置好的路由对象交给Vue（根组件）

   let vm = new Vue({
            el:'#app',
        //在这里使用
            router,
            components:{
                god,
                pp
            }
        })

8.在视图层的#app中留坑(使用组件)<router-view></router-view>

router-view 这个是vue自带的内置组件，它的作用是：将我们配置好的路由规则，放到组件上。

<div id="app">
        <router-view></router-view>
    </div>

---

路由的跳转

通过标签：`<router-link to='/login'></router-link>`

同样的在视图层：

<div id="app">
                <!-- 路由的跳转 -->
            <router-link to="/god">1</router-link>
        <router-link to="/pp">2</router-link>

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

(2)通过js控制跳转`this.$router.push({path:'/login'})`

区别：

this.$router.push() 跳转到指定的url，会向history插入新记录

this.$router.replace() 同样是跳转到指定的url，但是这个方法不会向history里面添加新的记录，点击返回，会跳转到上上一个页面。上一个记录是不存在的。

this.$router.go(-1) 常用来做返回，读history里面的记录后退一个

vue-router中的对象：

$route 路由信息对象,只读对象

$router 路由操作对象,只写对象

 methods:{
                goGod(){
                    this.$router.push({path:'/god'})
                },
                goPp(){
                    this.$router.push({path:'/pp'})
                }
}

 <button @click="goGod">1.js方式</button>
 <button @click="goPp">2.js方式</button>

 back(){
                    this.$router.go(-1)
                }


方法中心跳转的该方法为，返回上一层