vue路由--1基本使用

路由的引用

npm install vue-router

如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能：（先导入，再注册）

import Vue from 'vue'
import VueRouter from 'vue-router' Vue.use(VueRouter)

基本使用示例1

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

<head>
    <meta charset="UTF-8" />
    <title>let_const</title>
    <!-- <link rel="shortcut icon" href="#" /> -->
    <script src="../lib/vue.js"></script>
    <script src="../lib/vue-router.js"></script>
</head>
<div id="app">
    <!-- 路由的执行过程
 1.先是点a链接触发url地址的改变，然后被route路由监听到，进行路由规则path的匹配。
 2.匹配后，展示path对应的component组件
 3.将组件放到<router-view></router-view>占位里去 -->

    <!-- 写法一  不推荐-->
    <!-- #hash不能丢 -->
    <!-- <a href="#/login">登录</a>
    <a href="#/register">注册</a> -->
    <hr>
    <!-- 写法二 -->
    <!-- tag标签可以随意，不影响内部绑定 -->
    <router-link to="/login" tag="span">登录</router-link>
    <router-link to="/register">注册</router-link>

    <!-- 占位符  -->
    <router-view></router-view>
</div>

<body>


    <script>
        // 组件模板对象 
        // var login = {
        //     template: '<h1>登录组件</h1>'
        // }
        // // 
        // var register = {
        //     template: '<h1>注册组件</h1>'
        // }

        var login = {
            template: '<h1>登录组件</h1>'
        }

        var register = {
            template: '<h1>注册组件</h1>'
        }



        // 组件模板名称
        // Vue.component('login2', {
        //     template: '<h1>登录组件</h1>'
        // })


        var routerObj = new VueRouter({
            // 路由匹配规则
            routes: [
                // 注意：component必须是一个组件对象，不是组件模板名称
                // redirect重定向,默认指定根路径
                // 如果不写，默认进来是空白的根路径，不合理
                // { path: '/', redirect: '/login' },
                { path: '/login', component: login },
                { path: '/register', component: register }
            ]
        })

        new Vue({
            el: "#app",
            data: {},
            methods: {},
            router: routerObj

        })
    </script>
</body>

</html>

vue路由--1基本使用

猜你喜欢