Vue系列——路由

最新推荐文章于 2024-07-20 23:59:39 发布

EvilKingyhq

最新推荐文章于 2024-07-20 23:59:39 发布

阅读量143

点赞数

文章标签： vue js java

本文链接：https://blog.csdn.net/EvilKingyhq/article/details/104445742

版权

Vue中的路由

什么是路由

 vue里面的特性。和路由器的功能差别，点击一个路由，定位到一个地方；
 url地址和对应的资源的映射，通过一个路径的url地址，可以唯一找到一个
 资源。路由不包含子啊vue中，是一个插件，需要单独下载。

官方地址: link.

使用路由前引入路由

在js中定义路由；

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

idea中要自己去下载路由；在idea中输入：
npm install vue-router
在这里插入图片描述

路由的使用

demoCode

<body>
<div id="app">
    <h1>路由。。</h1>
    <p>
        <!-- 使用 router-link 组件来导航. -->
        <!-- 通过传入 `to` 属性指定链接. -->
        <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
        <router-link to="/tt">涛涛个人空间</router-link>
        <router-link to="/ll">亮亮的后花园</router-link>
        <router-link to="/cc">cc的鱼塘</router-link>
    </p>
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
</div>
<script>
    // 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)

    // 1. 定义 (路由) 组件。
    // 可以从其他文件 import 进来
    const Tt = { template: '<div>欢迎进入涛涛的空间</div>' }
    const Ll = { template: '<div>欢迎来到亮亮的后花园</div>' }
    const Cc = { template: '<div>来cc的鱼塘捕鱼..</div>' }
    // 2. 定义路由
    // 每个路由应该映射一个组件。 其中"component" 可以是
    // 通过 Vue.extend() 创建的组件构造器，
    // 或者，只是一个组件配置对象。
    // 这里相当于将模板装到链接里面来
    const routes = [
        { path: '/tt', component: Tt },
        { path: '/ll', component: Ll },
        { path: '/cc', component: Cc }
    ]

    // 3. 创建 router 实例，然后传 `routes` 配置
    // 你还可以传别的配置参数, 不过先这么简单着吧。
    /*创建一个路由，将链接放到路由里面来*/
    const router = new VueRouter({
        routes //等效于routes:routes
    })

    // 4. 创建和挂载根实例。
    // 记得要通过 router 配置参数注入路由，
    // 从而让整个应用都有路由功能
    //再把路由放到Vue里面来
    const app = new Vue({
        router
    }).$mount('#app')/*这里等效于el挂载*/

    // 现在，应用已经启动了！
</script>
</body>

EvilKingyhq

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue系列——路由

Vue中的路由什么是路由 vue里面的特性。和路由器的功能差别，点击一个路由，定位到一个地方； url地址和对应的资源的映射，通过一个路径的url地址，可以唯一找到一个资源。路由不包含子啊vue中，是一个插件，需要单独下载。官方地址: link.使用路由前引入路由在js中定义路由；<script src="node_modules/vue-router/dist/vue-...
复制链接

扫一扫