A method of using the router Vue

concept

Routing is a website, which it also refers to the routing parameters URL parameters
Routing parameters: display different content depending on the routing parameters -> different components Manual

First Experience

<div id="app">
    <ul>
        <li><router-link to="/films">电影</router-link></li>
        <li><router-link to="/yingyuan">影院</router-link></li>
        <li><router-link to="/tehui">特惠</router-link></li>
        <li><router-link to="/my">我的</router-link></li>
    </ul>
    <router-view /> 
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
// 步骤1：引入vue.js和vue-router.js文件
// 步骤2：创建组件   通过Vue.component来定义   或者简写  
// 步骤3：声明路由   通过new VueRouter传递对象 routes数组 
// 步骤4：在new Vue里面注册激活路由
// 步骤5：在页面挖坑显示   <router-view /> 
const films = {
    template: `<h1>电影区域</h1>`
}

const yingyuan = {
    template: `<h1>影院区域</h1>`
}

const tehui = {
    template: `<h1>特惠区域</h1>`
}

const my = {
    template: `<h1>我的区域</h1>`
}

// 声明组件访问路径
const router = new VueRouter({
    // mode: 'hash', 通过location.hash切换，通过window.onhashchange 监听切换
    mode: 'history', //通过history.pushState 切换,window.onpopstate 监听路径的切换
    // 当路由模式从hash改变成history时，
    // 有时候本来好好的网站突然访问不了了
    // 可能因为服务器配置文件
    // https://router.vuejs.org/zh/guide/essentials/history-     mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90
    // TODO. vue后面项目写完，大家统一先hash模式上线
    //       然后切换history
    routes: [// 特别注意其他地方都是router 只有这里是routes
         // path路由参数访问地址
        // name后期可以根据名字跳转
        // component这个路由显示的组件数据
        {path: '/', name: 'index', component: films},
        {path: '/yingyuan', name: 'yingyuan', component: yingyuan},
        {path: '/tehui', name: 'tehui', component: tehui},
        {path: '/my', name: 'my', component: my},
        {path: '/my', name: 'my', component: my, alias: '/a'},
        // /my-*   匹配my-开头的路由
        // *       匹配所有路径（上面路由都不匹配  则走下下面这个）
        {path:'*', redirect: '/'}
    ]
})
//定义vue并激活路由
let vm = new Vue({
    // 激活路由
    // router:router,
    router,

    // el: '#app',
    data: {

    }
}).$mount('#app')
</script>

redirect: 'path inside the path statement' statement redirect / jump URL
alias: 'name / alias' is to have two URL parameters

Learn a trick:
path which can be a wildcard by
routing the beginning of the match my- of my-
* matches all paths

vue routing principle

vue routing is achieved based on single page application ideas SPA / rule
-based BOM's location and history to achieve

the hash
the location.hash = value
location.onhashchange = handler
History
history.pushState = value
history.onpopstate = handler

In the single-page application mentioned in this SPA provides for partial page refresh in the project, thus reducing the HTTP page request to speed up the response time, improve the user experience, but not conducive to SEO optimization

Nested routing

URL display a plurality of components (parent-child relationship is definitely)

<div id="app">
    <router-view></router-view>
</div>
<script>
    // 定义组件
    const app = {
        template: `
            <div>
                <div class="header">头部</div>
                <div class="nav">
                    <router-link to="/users" >用户管理</router-link><br />    
                    <router-link to="/goods" >商品管理</router-link>
                </div>
                <fieldset>
                    <legend>内容区域</legend>
                    <!-- 父挖坑显示子 -->
                    <router-view />
                </fieldset>
            </div>
        `
    }

    const users = {
        template: `<div>用户列表内容</div>`
    }

    const goods = {
        template: `<div>商品列表内容</div>`
    }

    // 创建路由
    const router = new VueRouter({
        routes: [
            // {path: '/', component: app},
            // {path: '/users', component: users},
            // {path: '/goods', component: goods}
            // 先父路径 再子路径
            // /users
            {
                path: '/', 
                component: app,
                children: [// 子统一直写名称
                    {path: 'users', component: users},
                    {path: 'goods', component: goods}
                ]
            },
        ]
    })

    // 激活
    let vm = new Vue({
        router,
        el: '#app',
        data: {

        }
    })
</script>

The actual process we also confusion about routes, route, router

Here the routes inside vue-rouer configuration, a plurality of routes can be used to create objects, and router can route is acquired name, path, query, params ,, other router creating an instance VueRouter generally used in programming navigation, as $ router.push method

Programmatic Navigation: js jump method

Note: The traditional route to pass parameters and transmission parameters are the same naming route is similar to the form and submit url query is passed, the project is basically in vue mastered these two parameters can be passed to deal with the most applications

1.params with the route passing, refresh the page parameter will be lost
2.query with query parameters passed, refresh the page data is not lost
3. The value of the parameters used to accept this. $ Router is back with the name of the route will be able to obtain parameters

1: No parameters: address syntax
router.push ({path: '/ Home'})
2: There parameters / User / 123
router.push ({path: 'User', the params: {the userId: '123'}})
3: parameter / User the userId = 123?
router.push ({path: 'User', Query: {the userId: '123'}})

1: No parameter: Name Syntax
router.push ({name: 'User'})
2: There parameters / User / 123
router.push ({name: 'User', the params: {the userId: '123'}})
. 3 : there parameter / User the userId = 123?
router.push ({name: 'User', Query: {the userId: '123'}})