vue的带#hash路由的基本用法

最新推荐文章于 2025-03-29 14:07:28 发布

长路漫漫，与键作伴

最新推荐文章于 2025-03-29 14:07:28 发布

阅读量2.6k

点赞数

分类专栏： vue-router 文章标签： vue

本文链接：https://blog.youkuaiyun.com/qq_40974235/article/details/107441461

版权

vue-router 专栏收录该内容

1 篇文章

订阅专栏

1.效果图
在这里插入图片描述

2.代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
    <script src="./vue.js"></script>
    <script src="./vue-router.js"></script>
    <!-- <script src="https://unpkg.com/vue-router@2.0.0/dist/vue-router.js"></script> -->
    
<body>
    <div id="app">
        <!-- <a href="#/login">登录页面</a>  
        <a href="#/register">注册页面</a>   -->
        <!--默认渲染了一个a标签，并且这里不需要写#号-->
        <!--tag是自定义标签，其他功能都差不多-->
        <router-link to="/login" tag="span">登录页面</router-link>
        <router-link to="register">注册页面</router-link>

        <div>{{msg}}</div>
       <!--vue-router提供的元素，专门用来当作占位符，当匹配到路由规则，就会展示再 <router-view>这个位置上-->
        <router-view></router-view>
    </div>
    <script>
        //创建两个模板对象
        //登录
        var login={
            template:"<h1>这是登录模板页面</h1>"
        }
        //注册
        var register={
            template:"<h1 color='red'>这是注册模板页面</h1>"
        }
        //再new路由对象的时候，可以为构造函数，传递一个配置对象
        var vueObj=new VueRouter({
            //routes 这个配置对象，是给路由配置路由规则的意思
            routes:[
                //每个路由规则都是一个对象，这个规则对象，身上有两个必须的属性
                //path:代表监听的是哪个路由链接地址
                //{path:"/",component: login},//根路径也可以这么写，但是不推荐
                {path:"/",redirect:'/login' },//重定向到一个页面
                //component 表示，路由匹配到前面的path，则展示相对应的component属性名称
                //注意：component 必须是一个组件的模板对象，不是组件的引用名称
                {path:'/login',component: login},
                {path:'/register',component:register}
            ]
        });

        new Vue({
            el:"#app",
            data:{
                msg:"这是vue的实例"
            },
            //将路由规则对象，注册到vue的实例对象上，用来监听url的变化，展示相对应的组件
            router:vueObj
        })
    </script>
</body>
</html>

3.注意事项
1.注意VueRouter中的配置routes单词以及Vue实例中的 router属性单词
2.template中的html内容一定要有一个根标签，不能单独一个字符串
3.path中的链接地址要加"/"
4.component是模板对象不是引用对象
5.最重要的是如果手动写href标签,那么标签href中的链接地址前要加

4.#号的作用
https://blog.youkuaiyun.com/sodaslay/article/details/51222053