vue study notes Routing Basics

First, the application mentioned earlier stages of single-page rich, it would have to rely on our front-end routing

　　view-router

Second, the routing configuration is mounted

　　1, when (vue-router) we download a good plug-in routing-related projects we can use it

　　2, in the high school index.js router folder associated routing configuration code　　　

// first import route 
Import from VueRouter 'VUE-Router' 
Import from Vue 'VUE'

　　3. Here we also have to import vue, use vue.use install plug-ins to the current program vue

// first step, by vue.use install the plug 
Vue.use (VueRouter)

　　4, create a route object now of routes in the routing configuration object, corresponding to a path where a component is worth mentioning that the general route path of "/"

　　　　Routing and can not have a nested '/' nested routes provided in the children array, where the components need to import the relevant components

const Home = () =>
    import ('../components/Home.vue')
const User = () =>
    import ('../components/User.vue')
const About = () =>
    import ('../components/About.vue')
const HomeNews = () =>
    import ('../components/HomeNews.vue')
const HomeMessage = () =>
    import ('../components/HomeMessage.vue')

// Create an object VueRouter 
const routes = [ 
    // Create routing components 
    { 
        path: '', 
        the redirect: '/ Home' // rediret redirection is provided here in the default display page 
    }, 
    { 
        path: '/ Home', 
        Component: Home, 
        Children: [// route nested 
            { 
                path: '', 
                the redirect: 'News' 
            }, 
            { 
                path:' News', // here not add / 
                Component: HomeNews 
            }, 
            { 
                path: 'Message ', // here not add / 
                Component:HomeMessage
            }
        ]
    },
    {
        path: '/about',
        component: About
    },
    {
        path: '/user/:userId',
        component: User
    }

]

　　5, after configuring the mapping between path and components, we can create a route according to the route we configured above

Router new new VueRouter = const ({ 
    routes, 
    mode: 'History', // default configuration mode may be used to hash mode router mode 
    LinkActiveClass: 'active' // active treatment time where the class name can be changed also by div modified with a single active-class 
})

　　6, as to what is a hash pattern and history model, I will explain in detail in the next section

vue study notes Routing Basics

Guess you like