Shulou(Shulou.com)05/31 Report--

Most people do not understand the knowledge points of this article "vue routing how to achieve website navigation function", so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "vue routing how to achieve website navigation function" article.

1. First of all, you need to follow the Vue router support.

Npm install vue-router

Then you need to introduce into the project:

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

2. Js file that defines router

Import Vue from 'vue'import Router from' vue-router'import User from'.. / pages/user'import Home from'.. / pages/public/home'import Profile from'.. / pages/user/profile'import Form from'.. / pages/form'import Detail from'.. / pages/form/form'import File from'.. / pages/form/file'import Files from'.. / pages/file'Vue.use (Router) export default new Router ({routes: [{path:'/', component:Home Children: [{path:'/ user', component:Profile}, {path:'/ profile', component: User}, {path:'/ form', component: Form}, {path:'/ detail', component: Detail}, {path:'/ profiles', component: Files}, {path:'/ file', component: File}]}, {path:'/ login', component:Login}, {path:'/ 404' Component:Error}]})

3. Introduce router into main.js

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

4. Router-view is defined on the entry page.

5. In the page where path points to "/", define the layout of the page, for example: top (head)-middle (left navigation-right content)-bottom (bottom).

6, left navigation, using elementUI to achieve, there is a NavMenu navigation menu, do navigation function.

Here is a mention of the introduction of elementUI:

(1) installation

Npm I element-ui-S

(2) use

Add the following code to main.js:

Import ElementUI from 'element-ui'; import' element-ui/lib/theme-chalk/index.css'; Vue.use (ElementUI)

The code for the navigation bar is as follows:

{{item.title}} {{subItem.title}} {{threeItem.title}} {{subItem.title}} {{item.title}}

Define the display and icons of the left navigation. Index is the unique identification, and what is opened is the path path. Corresponding to the path in router, you can open the corresponding page that has been written.

Items: [{icon: 'el-icon-share', index:' user', title: 'system Home'}, {icon: 'el-icon-time', index:' profile', title: 'basic Table'}, {icon: 'el-icon-bell', index:' 3' Title: 'form related', subs: [{index: 'form', title:' basic form'}, {index:'3-2', title: 'three-level menu', subs: [{index: 'detail'' Title: 'rich text editor'}, {index: 'file', title:' markdown editor'},]}, {index: 'profiles', title:' file upload'}]},]

7, if it involves login pages and pages that do not need to be routed, you need to define other path pages at the "/" level in the js file of router, and then determine whether to enter the page is a routing page or a login page.

The above is the content of this article on "how to achieve website navigation by vue routing". I believe we all have some understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.