vue 中router的基本使用方法

Vue-router的基本使用
1 路由的安装
1.1直接下载 / CDN
https://unpkg.com/vue-router/dist/vue-router.js
或者直接通过script标签引入，它会自动安装的

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue-router.js"></script>

（注意这两个标签是有顺序的，因为vue-router要通过vue提前安装$http）
2.1也可以直接通过npm命令安装

npm install vue-router

如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

2.路由的基本使用
创建一个路由对象，当导入 vue-router包之后，在window全局对象中，就有了一个路由的构造函数，叫做VueRouter, 在new一个VueRouter对象，可以为构造函数，传递一个配置对象
这个routes是路由的匹配规则，每个路由规则，都是一个对象，这个规则对象，身上有有两个必须的属性
属性1：path表示监听哪个路由链接地址；
属性2：是component，表示如果路由是前面匹配到的path，则表示component属性对应的那个属性

 var routerObj =new VueRouter ({
                routes:[
                    //注意：compontent的属性值，必须是一个组件的模板对象，不能是组件的引用名称；
                    {path: '/login',  component: login},
                    {path: '/register',  component: register}
                ]
            })

3 将一个路由注册到一个vm实例中去

 var vm = new Vue({
              el:'#app',
              data:{
              },
              methods:{
              },
              router: routerObj 
              // 将路由规则对象，注册到vm实例上，用来监听URL，地址变化，然后展示对应组件
          });

4 在html文件中通过router-view来将路由匹配到的组件将渲染在这里

<router-view></router-view>

vue 中router的基本使用方法

猜你喜欢