Notes 16: routing and redirection

Time:2021-1-8

Notes 16: routing and redirection

  • Use steps
    1. Introducing Vue router under Vue
    2. Create two new components: login component and register component
    3. Create a new router object and register it with the VM example
  • Two ways of route rendering
    1. A label<a href="#/lgoin"></a>
    2. Provided by Vue router<router-link to='login'></router-link>(recommended)
  • Route activation class linkactiveclass
<!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>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
        integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <style>
        /*Route activation class*/
        .myActive{
            color:red;
            background-color: brown
        }
    </style>
</head>
<body>
    <div id="app">
        <! -- log in</a>
        < a = "# / register" > register < / a > -- >
        < router link to = / login > < router link > login
        < router link to = / register > < router link > register
        <! -- router placeholder, a component matching routing rules, is shown here -- >
        <router-view></router-view>
    </div>
    <script>
        var login = {
            Template: '< H1 > I'm login < / H1 >'
        }
        var register = {
            Template: '< H1 > I'm register < / H1 >'
        }
        // const Foo = { template: '<div>foo</div>' }
        // const Bar = { template: '<div>bar</div>' }

        // 2. Define some routes
        // Each route should map to a component. The "component" can
        // either be an actual component constructor created via
        // `Vue.extend()`, or just a component options object.
        // We'll talk about nested routes later.
        // const routes = [
        //     { path: '/foo', component: Foo },
        //     { path: '/bar', component: Bar }
        // ]
        //Every routing rule is an object and has two attributes
        //Property 1: path link address
        //Property 2: after the component matches the path, display the corresponding component
        const router = new VueRouter({
          routes:[
              {path:'/',redirect:'/login'},
              {path:'/login',component:login},
              {path:'/register',component:register}
          ],
          linkActiveClass:'myActive'

        })
        // const router = new VueRouter({
        //     routes // short for `routes: routes`
        // })
        var vm = new Vue({
            el: '#app',
            data: {},
            methods: {},
            //Register the routing rule object to the VM example to monitor the change of VM address, and then display the corresponding object
            router
        });
        Vue.config.devtools = true
    </script>
</body>

</html>

This work adoptsCC agreementReprint must indicate the author and the link of this article

Red smoke from sunshine censer