Vue router 路由简单使用

最新推荐文章于 2021-04-07 17:11:13 发布

yssa1125001

最新推荐文章于 2021-04-07 17:11:13 发布

阅读量160

点赞数

分类专栏： vue 文章标签： vue 路由 vue router vue-router vue 路由使用 vue router使用

本文链接：https://blog.csdn.net/yssa1125001/article/details/106045881

版权

vue 专栏收录该内容

26 篇文章 1 订阅

订阅专栏

PS: 为了加深印象，以前学会的东西尽量都整理成笔记

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
    <p>
        <!--使用router-link进行导航，to 指定链接，会被渲染成a标签-->
        <router-link to="/">首页</router-link>
        <router-link to="/person">人</router-link>
        <router-link to="/animal">物</router-link>
    </p>
    <router-view></router-view>
    </div>
    <script src="../vue.min.js"></script>
    <script src="../vue-router.min.js"></script>
    <script>
        //定义路由组件，可以从其他文件中 import 进来
        const welcome = {template: "<h2 style='color:red;'>欢迎</h2>"}
        const person = {template: "<h2 style='color:green;'>人类</h2>"}
        const animal = {template: "<h2 style='color:blue;'>动物</h2>"}

        //定义路由，每个路由应该映射一个路由组件
        const routes = [
            {path: "/",redirect: "/welcome"},//设置默认指向的路径，前边固定'/'，redirect为任意path路径
            {path: "/welcome",component: welcome},
            {path: "/person",component: person},
            {path: "/animal",component: animal}
        ]

        //生成Vue router路由实例，然后传入`routes`配置
        const router = new VueRouter({
            //routes: routes //正常写法
            routes //此为简写
        })

        //创建根实例，挂载路由，从而整个应用都可以使用路由功能
        new Vue({
            el: '#app',
            data: {
                
            },
            router
        })
    </script>
</body>

</html>

yssa1125001

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue router 路由简单使用

PS: 为了加深印象，以前学会的东西尽量都整理成笔记<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie.
复制链接

扫一扫

专栏目录