vue-router使用方式 安装到使用

前端路由概念：

对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源, 而对于单页面引用
程序来讲，主要通过URL中的hash(#号)来实现不同页面之间的切换，同时，hash有一个特点：HTTP请求中不会
包含hash相关的内容；所以，单页面程序中的页面跳转主要用hash实现。在单页面应用程序中，这种通过hash
改变来切换页面的方式，称作前端路由, Vue-Router就是Vue实现SPA前端路由的js插件。

1:下载安装 cnpm i vue-router -S

2:在main.js中引入路由组件: import VueRouter from 'vue-router'

3:在main.js中注册全局使用: Vue.use(VueRouter)

(以下我选择在src文件夹下新建一个router.js文件的方式)
具体如图：

4.1:在router.js中导入路由需要的组件: 如:
import children from "./components/children"

4.2:创建路由对象并配置路由规则:

 let router = new VueRouter({
    routes:[
        {
            path:'/children',
            component:children
        }
    ]
});`

4.3: 在main.js中先引入router.js文件：
import router from './router1.js'

4.4然后在main.js中将其路由对象传递给Vue的实例:

4.5.(1):在app.vue中留位置：直接引入：
<router-view></router-view>

4.5(2)或者4.5.(1)二选一:
html <router-link to="/children" tag="span">父组件</router-link> <router-view></router-view>
(路由中也可以使用插槽slot的，这里我没用）

扫描二维码关注公众号，回复： 7510374 查看本文章

注释：在4.5(2)中 父组件

默认在页面中是渲染成a标签的 可以通过tag="??" 改成span标签或者其他标签

要注意，当 对应的路由匹配成功，将自动设置 class 属性值为 .router-link-active 可以为其设置样式