Shulou(Shulou.com)06/02 Report--

This article mainly introduces how Razor Pages combined with Vue to achieve dynamic component single-page application, the article is very detailed, has a certain reference value, interested friends must read it!

Basic page structure

The Index page is the main page, and the other pages are just downloading templates and related vue component code. Temporarily loading the component uses a global function, and it is not difficult to change the method to vue.

CSS and JS files related to jquery, vue, vue-router and element-ui are introduced into Index. Implement routing related functions in Index const pages = {} Const routes = [{path:'/ login', component: () = > Promise.resolve (pages ['login'])}, {path:' / home', component: () = > Promise.resolve (pages ['home'])},] const router = new VueRouter ({routes: routes / / (abbreviated) equivalent to routes: routes}) const vueMain = new Vue ({el: "# app") Router:router}) vueMain.$router.push ('login') Function load (routePath) {console.log (routePath) if (typeof (pages [routePath])! = "undefined") {console.log ("Route to:" + routePath); vueMain.$router.push (routePath); return;} const url ='@ Url.Content ("~ /")'+ routePath; console.log ("url:" + url) $.get (url, {}, rsp = > {$("# components") .append (rsp); vueMain.$router.push (routePath) })} component implementation @ Html.AntiForgeryToken () determines pages ["login"] = Vue.component ('login' {template: "# tplLogin", data: function () {return {loginData: {userName:''}, canLogin:false} }, methods: {doLogin: function () {$.post ('Login', this.loginData, function (rsp) {console.log ("Login Result:" + rsp); load (' home');}) }, inputUserName: function () {this.canLogin = this.loginData.userName.trim () .length > 2;}) Jump page

You can see that the key method is load ('home'); it determines whether the component has been loaded, and then determines whether the component needs to be loaded asynchronously.

These are all the contents of the article "how Razor Pages combines Vue to implement dynamic component single-page applications". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow 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.