Vue-cli and webpack in windows (4) use of Route vue-router, vue-clivue-router

Vue-cli and webpack in windows (4) use of Route vue-router, vue-clivue-router

Install vue-cli and webpack in windows (1) Environment

Build a website using vue-cli and webpack in windows (2) Import bootstrap styles

Build a website using vue-cli and webpack in windows (3) use components

1. This article is based on the above three articles.

2. Install the vue-router plug-in, run cmd to enter the project directory, and run the following command:

cnpm install vue-router --save-dev 

3. Create a folder page under the src folder to store the template file, and then create an index under the folder. vue, list. two vue files, and then open index. paste the following code into vue:

<Template> <div class = "jumbotron"> 
Open list. vue and paste the following code:

<Template> <div class = "list-group"> <a href = "#" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" class = "list-group-item active"> here is the list page </a> <a href = "#" rel = "external nofollow "rel =" external nofollow "class =" list-group-item "> Dapibus ac facilisis in </a> <a href = "#" rel = "external nofollow" rel = "external nofollow "class =" list-group-item "> Morbi leo risus </a> <a href =" # "rel =" external nofollow "=" external nofollow "rel =" external nofollow "rel =" external nofollow "rel =" external nofollow "class =" list-group-item "> Porta ac consectetur ac </a> <a href = "#" rel = "external nofollow" class = "list-group-item"> vestibulum at eros </a> </div> </template>
Now, the content of both pages is ready. Next, let's modify the content of the app. vue file.
4. Open the app. vue file under the src folder and modify the code

<template>  <div>  <HtmlHeader></HtmlHeader>    <router-view     class="view"     keep-alive     transition     transition-mode="out-in">    </router-view> <HtmlFooter></HtmlFooter><span style="white-space:pre"> </span>    </div> <span style="white-space:pre"> </span> </template>   <script> import HtmlHeader from './components/header' import HtmlFooter from './components/footer' export default {  components: {   HtmlHeader,   HtmlFooter  } } </script> 
The router-view is used to load the two newly created pages here.
After modifying the entry file, configure the routing rules.
5. Create a new folder config under the src folder to store the routing configuration. Create and open the routes. js file under the config folder, Then paste the following code and save it:

// Load the Template File import index from '.. /page/index 'import list from '.. /page/list '// set the routing rule export default [{path:'/', component: index}, {path:'/list', component: list}]
Now the route configuration file has been configured. Next we will open the main. js file under the sec folder to set the route to use.
6. Open the main. js file and add the following code to the header:

// Reference the routing plug-in import VueRouter from 'vue-router '// try out the routing plug-in vue. use (VueRouter) // introduce the route configuration file import routes from '. /config/routes '// use the configuration file rule const router = new VueRouter ({mode: 'History', base: _ dirname, routes: routes })
This is to introduce and use the routing plug-in, and then load the routing rules

Next

new Vue({  el: '#app',  template: '<App/>',  components: { App } }) 
Change

const app = new Vue({    router: router,    render: h => h(App) }).$mount('#app') 

Code of the entire page after setting
7. Load and run npm run dev to check the effect. Open http: // localhost: 8080 and http: // localhost: 8080/list to see the effect.
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.