vue2.0路由知识1(路由创建的整个过程)

顺晟科技

2021-09-19 12:39:44

162

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../vue2.2.js"></script>
        <script src="../vue-router2.1.js"></script>
    </head>
    <body>
        <div id="app">
            <p>
                <!--通过to属性指定链接-->
                <!--<router-link>默认会被渲染成一个<a>标签-->
                <router-link to="/home" tag="li">Home</router-link>
                <router-link to="/about">About</router-link>
                <hr/>
                <!--<router-link :to="{path:\'home\'}">Home</router-link>
                <router-link :to="\'about\'" tag="li">About</router-link>-->
            </p>
            
            <!--路由出口，将路由匹配的组件渲染到这里-->
            <!--将自动设置class属性值 .router-link-active-->
            <router-view></router-view>
        </div>
        
    <script>
        //1.定义组件
        const Home = {
            template:"<div><h1>Home</h1><p>Hello,vue router!</p></div>"
        }
        
        const About = {
            template:"<div><h1>About</h1><p>这是关于vue-router</p></div>"
        }
        
        //2.定义路由 (每个路由应该映射一个组件)
        const routes = [{
            path:"/home",
            component:Home
        },{
            path:"/about",
            component:About
        },{
            path:"/",
            redirect:"/home"
            /*component:Home*/
        },{
            path:"*",
            redirect:"/home"//重定向
        }
        ]
        
        //3.创建router实例 ，然后传‘routes’ 配置
        const router = new VueRouter({
            linkActiveClass:\'active\',
            /*mode:"history",*/
            routes // 相当于   routes:routes  
        })
        
        //4.创建和挂载根实例，从而让整个应用都有路由功能
        const vm = new Vue({
            router   //相当于 router:router
        }).$mount("#app")
        
        
        
    </script>
    </body>
</html>

上一篇：什么事:vue 3 x菲兰达（音似" 下一篇：VUE腾讯云网页上传视频SDK上传进

网站建设

Js

vue2.0路由知识1(路由创建的整个过程)