vue之路由

最新推荐文章于 2022-09-28 11:56:02 发布

心之所向...

最新推荐文章于 2022-09-28 11:56:02 发布

阅读量169

点赞数

分类专栏： vue 文章标签：路由

本文链接：https://blog.csdn.net/FRMNZR/article/details/103788912

版权

vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

什么是路由

路由是负责将进入的浏览器请求映射到特定的组件代码中。即决定了由谁(组件)去响应客户端请求。简单说路由就是url地址和对应的资源的映射，通过一个路径的url地址，可以唯一找到一个资源。路由不包含在vue中，是一个插件，需要单独下载。

官方地址：https://router.vuejs.org/zh/

地址：https://unpkg.com/vue-router@3.0.1/dist/vue-router.js

做路由步骤：

1.准备组件

2.映射关系（url映射组件）

3.告诉vue我要使用路由

4.组件渲染的位置

  <!--vue js--> //注意js引入顺序  vuejs在前
    <script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
    <!--路由js-->
    <script type="text/javascript" src="node_modules/vue-router/dist/vue-router.js"></script>
<body>
    <div id="app">
        <router-link to="/index">首页</router-link>
        <router-link to="/employee">员工</router-link>
        <router-link to="/product">产品</router-link>
        <!--4.组件渲染的位置-->
        <router-view></router-view>
    </div>
</body>

<script type="text/javascript">
    1.准备组件
    let INDEX = Vue.component("index", {
        template: "<h1>首页</h1>"
    });
    let PRODUCT =Vue.component("product", {
        template: "<h1>产品</h1>"
    });
    let EMPLOYEE = Vue.component("employee", {
        template: "<h1>员工</h1>"
    });
    2.映射关系（url映射组件）
    let router = new VueRouter({
        routes:[
            /*路径映射到组件*/
            {path:"/index",component:INDEX},
            {path:"/employee",component:EMPLOYEE},
            {path:"/product",component:PRODUCT}
        ]
    })
    new Vue({
        el:"#app",
       /* 3.告诉vue我要使用路由*/
       router //是router：router 的简写 
    })
</script>
</html>

心之所向...

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue之路由

什么是路由路由是负责将进入的浏览器请求映射到特定的组件代码中。即决定了由谁(组件)去响应客户端请求。简单说路由就是url地址和对应的资源的映射，通过一个路径的url地址，可以唯一找到一个资源。路由不包含在vue中，是一个插件，需要单独下载。官方地址：https://router.vuejs.org/zh/地址：https://unpkg.com/vue-router@3.0.1/dis...
复制链接

扫一扫